Событие Google Map bounds_changed запускается несколько раз при перетаскивании

У меня есть карта Google с маркерами. Я хочу, чтобы мои маркеры обновлялись при перемещении/увеличении карты...

Google рекомендует использовать для этого событие bounds_changed, но когда я перемещаю карту, событие срабатывает для каждого пикселя, на который я перемещаю карту. Я хочу, чтобы карта обновлялась только тогда, когда пользователь перестал перемещать карту, т.е. когда он отпустил кнопку мыши после перетаскивания.

Как я могу это сделать?

Ответ 1

Оказывается, это была ошибка: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.

Команда Google рекомендует использовать событие "без дела". Например:

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

Ответ 2

В то время как выбранный ответ подходит для большинства условий. Если вы хотите самостоятельно контролировать задержку, вы можете просто использовать что-то вроде:

 var mapupdater;

 {....}

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


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

Ответ 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);
    }
}()));

Ответ 4

Вы должны проверить, как работает функция debounce. Хорошая статья Тейлора Кейса определяет это следующим образом:

Эта функция создана для того, чтобы ограничить количество вызовов функции: события прокрутки, события перемещения мышью и события нажатия клавиш - все это отличные примеры событий, которые мы могли бы захотеть захватить, но это может быть довольно сложным, если мы собираем их каждый раз раз они стреляют

Итак, вы определяете функцию где-то в вашем коде:

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 мс - хорошая частота для использования здесь.

Ответ 5

попробуйте использовать как zoom_changed, так и dragend

Ответ 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