【问题标题】:In Google Maps V3, how can I get a draggable marker to pan the map?在 Google Maps V3 中,如何获得可拖动的标记来平移地图?
【发布时间】:2011-03-19 21:16:08
【问题描述】:

我找到了几个 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 实现这种效果?

谢谢。

【问题讨论】:

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


【解决方案1】:

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

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

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

        });

【讨论】:

  • 这段代码“有效”,但没有达到我想要的效果。此代码在释放标记时平移地图。我希望地图在制造商发布时平移,就像 v2 API 中的自动行为一样。我将您的示例发布在publicgloucester.com/test2.html
【解决方案2】:

Google 已修复此问题:http://code.google.com/p/gmaps-api-issues/issues/detail?id=2404

您可以在http://www.publicgloucester.com/test2.html 看到正在执行的修复。忽略“它没有做我想要的”的评论;该评论已过时。

【讨论】:

    【解决方案3】:

    您要收听的事件是您的示例“拖动”中使用的事件,您可以添加延迟以使其看起来不那么“虚假”,因此地图会跟随标记而不是立即更新。试试这个:

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

    【讨论】:

    • 这和我的原始代码有同样的问题;标记和手发散,并且不能正确平移。换句话说,标记不会像在 v2 中那样自动平移地图,这很糟糕。谢谢!
    • 我做了一些研究,在 v3 中已经有效地删除了 'dragCrossMove' 属性,目前没有替换。有弹性的选项似乎也消失了。
    【解决方案4】:

    您是否尝试过实现此功能以恢复有弹性的动作? http://groups.google.com/group/nycjs/browse_thread/thread/259a325fa980e575

    【讨论】:

    • 澄清应该作为评论,而不是作为答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-27
    • 1970-01-01
    • 2014-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多