在Google Maps V3中，如何使可拖动标记同时移动地图？

Question

我找到了几个关于在拖动标记时如何平移地图的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"。但我向您保证，在拖动标记时地图确实会平移。

我尝试使用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());
      });

   }

我认为这样做不起作用是有道理的，因为在地图移动时将标记放置在地图中央是错误的。

V2 API 自动执行此操作，而 V3 API 不会。如何使用 V3 API 实现此效果？

谢谢。

- Martin Del Vecchio

---

我一直在查找，看起来这个功能在V2-> V3转换中被删除了。我找不到任何官方消息，但似乎就是这样发生的。糟糕。 - Martin Del Vecchio

FYI - http://code.google.com/p/gmaps-api-issues/issues/detail?id=2404 - Chris Broadfoot

Answer 1

使用dragend代替drag。 代码将是：

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

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

        });

- vbn

---

这段代码“可用”，但并没有达到我想要的效果。当标记释放时，此代码会平移地图。我希望在标记释放时地图能够平移，就像v2 API中的自动行为一样。我已经将您的示例发布在http://www.publicgloucester.com/test2.html上。 - Martin Del Vecchio

Answer 2

Google已经解决了这个问题：http://code.google.com/p/gmaps-api-issues/issues/detail?id=2404

你可以在http://www.publicgloucester.com/test2.html上看到修复的效果。请忽略"它不能完成我想要的"这条注释，该注释已过时。

- Martin Del Vecchio

Answer 3

你想监听的事件是你的示例中使用的“drag”事件，为了使它看起来不那么“虚假”，你可以添加一个延迟，这样地图会跟随标记而不是立即更新。尝试这个：

google.maps.event.addListener(marker, "drag", function(event) {
  var point = marker.getPosition();
  window.setTimeout(function(){
    map.panTo(point);
  }, 100);
});

- xmarcos

---

这个程序和我原来的代码存在相同的问题，标记和手的位置不一致，并且它无法正确地平移。换句话说，标记无法像v2那样自动平移地图，这很糟糕。谢谢！ - Martin Del Vecchio

我做了一些研究，发现'dragCrossMove'属性在v3中已被有效移除，目前也没有替代品。弹跳选项似乎也消失了。 - xmarcos

Answer 4

你尝试过实现这个方法来恢复弹跳效果吗？http://groups.google.com/group/nycjs/browse_thread/thread/259a325fa980e575

- megan

---

澄清应该作为评论进行，而不是作为答案。 - zongweil