In Google Maps V3, how can I get a draggable marker to pan the map?

问题

I have found several V2 examples of how to pan the map while a marker is being dragged. For example: 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();
});

This page seems to "auto-pan" while the marker is being dragged; note that its only event listener is for "dragend". But I assure you that that map pans while the marker is being dragged.

I am trying to achieve the same thing with the V3 API, without any success. I even tried calling map.panTo() while the icon is being dragged, with unsatisfying results: 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());
      });

   }

It makes sense to me that this wouldn't work, since panning to place the marker in the center of the map, while the map is moving, is bogus.

Is it as simple as the V2 API doing this automatically, while the V3 API does not? How can I achieve this effect with the V3 API?

Thanks.

回答1:

use dragend instead of drag. the code will be,

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

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

        });

回答2:

Google has fixed this: http://code.google.com/p/gmaps-api-issues/issues/detail?id=2404

You can see the fix in action at http://www.publicgloucester.com/test2.html. Ignore the comment that says "it doesn't do what I want"; that comment is obsolete.

回答3:

The event you want to listen is the one used in your example "drag", what you can do to make it look less "bogus" is add a delay, so the maps follows the marker instead of being immediately updated. Try this:

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

回答4:

have you tried to implement this to get the bouncy action back? http://groups.google.com/group/nycjs/browse_thread/thread/259a325fa980e575

来源：https://stackoverflow.com/questions/3314698/in-google-maps-v3-how-can-i-get-a-draggable-marker-to-pan-the-map