google-maps - 在 Google map V3 中,如何获得可拖动标记来平移 map ?

标签 google-maps google-maps-api-3 google-maps-markers

我找到了几个关于如何在拖动标记时平移 map 的 V2 示例。例如:http://www.putyourlightson.net/projects/coordinates

    // create map and add controls
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());        
map.addControl(new GMapTypeControl());

// set centre point of map
var centrePoint = new GLatLng('53.34870686020199', '-6.267356872558594');
map.setCenter(centrePoint, 14); 

// add a draggable marker
var marker = new GMarker(centrePoint, {draggable: true});
map.addOverlay(marker);

// add a drag listener to the map
GEvent.addListener(marker, "dragend", function() {
    var point = marker.getPoint();
    map.panTo(point);
    document.getElementById("latitude").value = point.lat();
    document.getElementById("longitude").value = point.lng();
});

当拖动标记时,该页面似乎会“自动平移”;请注意,它唯一的事件监听器是“dragend”。但我向您保证,拖动标记时 map 会平移。

我正在尝试使用 V3 API 实现同样的目标,但没有成功。我什至尝试在拖动图标时调用map.panTo(),但结果并不令人满意:http://www.publicgloucester.com/test.html

function initialize ()
   {
   Gloucester = new google.maps.LatLng (42.6159285, -70.6619888);

   myOptions = 
      {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: Gloucester,
      streetViewControl: false
      }

   map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

   marker = new google.maps.Marker ({position: Gloucester, title: "Gloucester, MA"});
   marker.setMap (map);
   marker.setDraggable (true);

   google.maps.event.addListener (marker, 'drag', function (event) 
      {
      // Pan to this position (doesn't work!)
      map.panTo (marker.getPosition());
      });

   }

对我来说,这是行不通的,因为在 map 移动时平移以将标记放置在 map 中心是伪造的。

是否像 V2 API 自动执行此操作一样简单,而 V3 API 则不然?如何使用V3 API实现这种效果?

谢谢。

最佳答案

使用拖尾而不是拖动。代码将是,

  google.maps.event.addListener(marker, "dragend", function(event) {

       var point = marker.getPosition();
       map.panTo(point);

        });

关于google-maps - 在 Google map V3 中,如何获得可拖动标记来平移 map ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3314698/

相关文章:

android - Google API MapView OutOfMemoryError 问题

java - GoogleMaps v2 Android 的我的位置按钮,不显示

ios - 反转 GMSMutablePath 数组

javascript - Google map V3 InvalidValueError Rails 5

javascript - 如何从 Javascript 事件更新 ruby​​ 变量?

javascript - 从链接调用 google maps v3 中的事件监听器

java - 除了标题和代码 fragment 之外,如何在标记中包含 ID

php - 谷歌教程的标记问题 "Using PHP/MySQL with Google Maps"

google-maps-markers - 如何在从另一个javascript函数调用的javascript函数中传递多个参数?

android - 谷歌地图不适用于谷歌游戏