Google Maps drag event doesn't capture center change until dragging ends in Chrome Device Mode

问题

I'm using Angular Google Maps to include a map in my web app. I am listening to the drag event which fires successfully but the center property of the map doesn't update until the dragging stops. Is this the expected behavior? I couldn't find any docs to confirm.

$scope.map = {
    center: $scope.currentCoords,
    control: {},
    zoom: 15,
    events: {drag: function(m, e, args){mapDragged(m, e, args)}}
};

var mapDragged = function(map, eventName, args){
    console.log($scope.map.center); // this value only changes when dragging stops and restarts
}

UPDATE

I tried to use the native google maps events in this example that seem to capture the change in the center of the map but this still doesn't work. The 'center_changed' event only fires after the drag stops and not like in the example

google.maps.event.addListener($scope.map.control.getGMap(), 'center_changed',function() {
    console.log($scope.map.control.getGMap().getCenter().toUrlValue());
});

UPDATE 2

It looks like everything works fine when I have the chrome developer tools NOT SET to a DEVICE MODE. The intended usage is on mobile so need to find a way to make this work...

回答1:

A similar question about this same behavior was asked here.

And though I can't find specific mention in the API docs about the differences between full browsers and devices, the aforementioned question links to a Maps API example specific to events, which illustrates the behavior exactly as you've described.

In non-device mode, center_changed continues to fire as the map is dragged.

In device mode, it does not. Only drag and mousemove fire while the map is being dragged. I also confirmed this behavior on actual devices, both Droid and iPhone.

That being the case, I would say it's safe to assume this is an expected, albeit undocumented, behavior.

回答2:

If your problem was (like mine) trying to make the map reload when the user drags it on a mobile device, I have a workaround. Unfortunately, the map tiles only load when dragging ends (same as the center attribute) - which results in a pretty bad user experience.

It seems like we can't change this behavior, however I helped myself out by putting the map in a larger div within the original div, so that a larger part of the map is loaded and the user doesn't see grey tiles when dragging. Here's my css for that larger div:

#map {
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
}

来源：https://stackoverflow.com/questions/35750750/google-maps-drag-event-doesnt-capture-center-change-until-dragging-ends-in-chro