Question

我有一个带标记的谷歌地图。我希望在移动/缩放地图时刷新我的标记......

Google建议使用事件bounds_changed，但是当我移动地图时，会为我移动地图的每个像素触发事件。我希望仅在用户停止移动地图时刷新地图，即在拖动后释放鼠标按钮时。

我该怎么做？

由于

Answer 1

事实证明这是一个报告的错误：http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371。

Google小组建议使用“空闲”活动。例如：

google.maps.event.addListener(map, 'idle', function() {
});

Answer 2

虽然所选答案最适合大多数情况。如果你想自己控制延迟，你可以简单地使用像

这样的东西

 var mapupdater;

 {....}

 google.maps.event.addListener(map, "bounds_changed", mapSettleTime); 


 function mapSettleTime() {
     clearTimeout(mapupdater);
     mapupdater=setTimeout(getMapMarkers,500);
 }

Answer 3

添加一个超时，在事件触发后500ms运行代码，每次事件触发清除超时并创建一个新超时。

google.maps.event.addListener(map, 'bounds_changed', (function () {
    var timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // here goes an ajax call
        }, 500);
    }
}()));

Answer 4

您应该检查去抖功能的工作原理。一个不错的article by Taylor Case定义如下：

此功能的构建是为了限制a的次数函数被调用 - 滚动事件，mousemove事件和按键事件都是我们可能想要捕获的事件的很好的例子，如果我们每次捕捉它们，都会非常沉重火。

所以你在代码中的某个地方定义了这个函数：

function debounce(fn, time) {
  let timeout;
  return function() {
    const args = arguments;
    const functionCall = () => fn.apply(this, args);
    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  }
}

然后在添加监听器时使用该功能：

google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));

似乎250毫秒是一个很好的频率在这里使用。

Answer 5

尝试同时使用zoom_changed和dragend

Answer 6

这是一个小片段，将删除所有多余的'bound_changed'调用：

var timeout;
google.maps.event.addListener(map, 'bounds_changed', function () {
window.clearTimeout(timeout);
timeout = window.setTimeout(function () {
    //do stuff on event
    }, 500);
}); //time in ms, that will reset if next 'bounds_changed' call is send, otherwise code will be executed after that time is up

拖动时，Google地图事件bounds_changed会多次触发

6 个答案: