Событие Google Map, вызванное перетаскиванием, вызвано несколько раз при перетаскивании

Question

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

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

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

Answer 1

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

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

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

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

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

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

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

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

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

Answer 5

Вот небольшой фрагмент, который удалит все лишние вызовы 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

Answer 6

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