Javascript 拖动时多次触发谷歌地图事件bounds_changed
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4338490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Map event bounds_changed triggered multiple times when dragging
提问by Matthieu Napoli
I have a google map with markers. I want my markers to be refreshed when the map is moved/zoomed...
我有一个带有标记的谷歌地图。我希望在移动/缩放地图时刷新我的标记...
Google recommend to use the event bounds_changedfor that, but when I move the map, the event is triggered for each pixel that I move the map. I want the map to be refreshed only when the user stopped moving the map, i.e. when he released the mouse button after dragging.
Google 建议为此使用该事件bounds_changed，但是当我移动地图时，我移动地图的每个像素都会触发该事件。我希望只有当用户停止移动地图时才刷新地图，即当他在拖动后释放鼠标按钮时。
How can I do that ?
我怎样才能做到这一点 ？
回答by Matthieu Napoli
It turns out it was a reported bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.
事实证明这是一个报告的错误：http: //code.google.com/p/gmaps-api-issues/issues/detail? id= 1371。
The Google team recommend to use the event "idle". For example :
Google 团队建议使用事件“空闲”。例如 ：
google.maps.event.addListener(map, 'idle', function() {
});
回答by 0x1b
While the selected answer is best for most circumstances. If you want to control the delay yourself, you can simply use something like;
虽然所选答案最适合大多数情况。如果你想自己控制延迟，你可以简单地使用类似的东西；
var mapupdater;
{....}
google.maps.event.addListener(map, "bounds_changed", mapSettleTime);
function mapSettleTime() {
clearTimeout(mapupdater);
mapupdater=setTimeout(getMapMarkers,500);
}
回答by Himanshu Khurana
Add a timeout, that runs your code 500ms after the event fires, each time the event fires clear the timeout and create a new one.
添加一个超时，它会在事件触发后 500 毫秒运行您的代码，每次事件触发都会清除超时并创建一个新的超时。
google.maps.event.addListener(map, 'bounds_changed', (function () {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
// here goes an ajax call
}, 500);
}
}()));回答by Mau Mu?oz
You should check how a debounce function works. A nice article by Taylor Casedefine it as follows:
您应该检查去抖动功能的工作原理。Taylor Case 的一篇不错的文章将其定义如下：
This function is built in order to limit the amount of times a function is called?—?scroll events, mousemove events, and keypress events are all great examples of events that we might want to capture, but can be quite taxing if we capture them every single time they fire.
这个函数的构建是为了限制函数被调用的次数？-?滚动事件、鼠标移动事件和按键事件都是我们可能想要捕获的很好的事件示例，但如果我们捕获它们可能会非常繁重每次他们开火。
So you define the function somewhere in your code:
因此，您在代码中的某处定义了该函数：
function debounce(fn, time) {
let timeout;
return function() {
const args = arguments;
const functionCall = () => fn.apply(this, args);
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
}
}
Then you just use that function when adding your listener:
然后您只需在添加侦听器时使用该函数：
google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));
It seems that 250 ms is a good frequency to use here.
似乎 250 ms 是在这里使用的好频率。
回答by yadavr
Here is a little snippet that will remove all redundant 'bound_changed' call's:
这是一个小片段，它将删除所有冗余的“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
回答by Galen
try using both zoom_changed and dragend
尝试同时使用 zoom_changed 和 dragend
