我有一个带标记的谷歌地图。当地图被移动/缩放时,我希望我的标记可以刷新...
谷歌建议使用事件bounds_changed
来实现这一点,但是当我移动地图时,事件会在每个像素移动地图时触发。我希望地图仅在用户停止移动地图时进行刷新,即用户在拖动后释放鼠标按钮时刷新。
我该怎么做?
我有一个带标记的谷歌地图。当地图被移动/缩放时,我希望我的标记可以刷新...
谷歌建议使用事件bounds_changed
来实现这一点,但是当我移动地图时,事件会在每个像素移动地图时触发。我希望地图仅在用户停止移动地图时进行刷新,即用户在拖动后释放鼠标按钮时刷新。
我该怎么做?
事实证明这是一个已经被报告的bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.
Google团队建议使用事件"idle"。例如:
google.maps.event.addListener(map, 'idle', function() {
});
虽然对于大多数情况,选择的答案是最好的。但如果你想自己控制延迟,你可以简单地使用如下代码:
var mapupdater;
{....}
google.maps.event.addListener(map, "bounds_changed", mapSettleTime);
function mapSettleTime() {
clearTimeout(mapupdater);
mapupdater=setTimeout(getMapMarkers,500);
}
需要翻译的内容已完成,请确认是否还有其他需要翻译的内容。
google.maps.event.addListener(map, 'bounds_changed', (function () {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
// here goes an ajax call
}, 500);
}
}()));
这个函数是为了限制一个函数被调用的次数而建立的——滚动事件、鼠标移动事件和按键事件都是我们可能想捕捉的事件的很好的例子,但是如果我们每次它们触发时都捕捉它们,就会相当耗费资源。
所以你需要在代码的某个地方定义这个函数:
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毫秒似乎是一个不错的频率。
尝试同时使用zoom_changed和dragend事件
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