开发者

Disable drag inertia / momentum on Google Maps V3

开发者 https://www.devze.com 2023-03-26 23:04 出处:网络
Is there a way to di开发者_开发技巧sable drag inertia on Google Maps V3? Seems like it should be a MapOption, but I can\'t find any way to do this.I ran into this same problem today, with some custom

Is there a way to di开发者_开发技巧sable drag inertia on Google Maps V3? Seems like it should be a MapOption, but I can't find any way to do this.


I ran into this same problem today, with some custom Div's floating above the map needing to be re-positioned on Map Movement. My repositioning worked fine as long as the user came to a complete stop after dragging before letting the mouse go (so there would be no momentum), but if one just dragged quickly and released the div's would end up a bit off.

To fix this, I hooked into the drag event and the idle event:

var map = /* All the map config */
var stickyCenter = map.getCenter();
/* ... Code ... */
google.maps.event.addListener(map, 'drag', function(){ stickyCenter = map.getCenter(); });
google.maps.event.addListener(map, 'idle', function() { map.setCenter(stickyCenter); });

What happens is that after you've dragged and the map has come to a stop (after the momentum is done) the map 'snaps' back into place.

If the snapping is too sudden, one could probably panTo or animate the movement in some way. Hope that helps, it's not perfect, but it's a way to reverse the momentum from a drag event.


Use the undocumented option disablePanMomentum e.g.:

new google.maps.Map(document.getElementById(id), {
    disablePanMomentum: true,
    backgroundColor: 'none',
    disableDefaultUI: true,
    center: {
        lat: 40.674,
        lng: -73.945
    },
    zoom: 2,
    ...


This cannot be done with Maps API V3 at this time. Consider filing a feature request here:

http://code.google.com/p/gmaps-api-issues/


I'm pretty sure it's possible to at least counter-act the momentum. Somebody please correct me if I'm wrong! For the sake of simplicity, for instance, let's say your map container has a width of 100vw and a height of 100vh. You simply call getCenter() in a function that is called by a mouseup event, and then use those coordinates to immediately setCenter()?

function initMap(){

    ...

    var win = window;
    google.maps.event.addDomListener(win, 'mouseup', setCoords);
    function setCoords(){
        var x = myMap.getCenter();
        var lat = x.lat();
        var lng = x.lng();
        myMap.addListener('center_changed', function(lat, lng){
        myMap.setCenter(new google.maps.LatLng(lat, lng));
    };
};

The code above actually works, but the kicker is that it only works once until the browser becomes seemingly overloaded and produces the error Uncaught RangeError: Maximum call stack size exceeded.

Not sure what to do now.

More info about this here.


This one works just fine for me:

map.addListener("dragend", () => map.setCenter(map.getCenter()));
0

精彩评论

暂无评论...
验证码 换一张
取 消