谷歌地图事件bounds_changed在拖动时被触发多次

Question

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

谷歌建议使用事件bounds_changed来实现这一点，但是当我移动地图时，事件会在每个像素移动地图时触发。我希望地图仅在用户停止移动地图时进行刷新，即用户在拖动后释放鼠标按钮时刷新。

我该怎么做？

- Matthieu Napoli

Answer 1

事实证明这是一个已经被报告的bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.

Google团队建议使用事件"idle"。例如：

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

- Matthieu Napoli

---

我该如何设置在空闲状态开始后2秒触发自定义地图更新函数？ - M Reza Saberi

我在使用这个事件处理程序时，也遇到了React的同样问题... - adir abargil

Answer 2

虽然对于大多数情况，选择的答案是最好的。但如果你想自己控制延迟，你可以简单地使用如下代码：

 var mapupdater;

 {....}

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


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

- 0x1b

Answer 3

在事件触发后添加一个超时定时器，延迟500毫秒运行你的代码，每次事件触发时清除当前的定时器并创建一个新的。

需要翻译的内容已完成，请确认是否还有其他需要翻译的内容。

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

- Himanshu Khurana

---

你读了被接受的答案吗？它做同样的事情，但更容易。 - Matthieu Napoli

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毫秒似乎是一个不错的频率。

- Mau Muñoz

Answer 5

尝试同时使用zoom_changed和dragend事件

- Galen

---

它在缩放和拖动结束时绝对能完美工作，但当我们使用平移控制移动地图时它就不起作用了。 - ramya

如果你这样做的话要小心，你会错过通过键盘平移地图的用户。 - Brad

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

- ramya