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

Question

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

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

我怎样才能做到这一点 ？

谢谢

Answer 1

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

谷歌团队建议使用"空闲"事件.例如 :

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

您应该检查去抖动功能的工作原理。Taylor Case 的一篇不错的文章将其定义如下：

这个函数是为了限制函数被调用的次数而构建的？-?滚动事件、鼠标移动事件和按键事件都是我们可能想要捕获的很好的事件示例，但如果我们捕获它们可能会非常繁重每次他们开火。

因此，您在代码中的某处定义了该函数：

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 ms 是在这里使用的好频率。