Les limites de l'événement Google Map ont été modifiées déclenchées plusieurs fois lors du déplacement
J'ai une carte google avec des marqueurs. Je veux que mes marqueurs soient actualisés lorsque la carte est déplacée / agrandie...
Google recommande d'utiliser l'événement bounds_changed, mais lorsque je déplace la carte, l'événement est déclenché pour chaque pixel que je déplace la carte. Je veux que la carte soit actualisée uniquement lorsque l'Utilisateur a cessé de déplacer la carte, c'est-à-dire quand il a relâché le bouton de la souris après avoir fait glisser.
Comment puis-je faire ça ?
Merci
6 réponses
Il s'avère que c'était un bug signalé: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371 .
L'équipe de Google recommande d'utiliser l'événement "inactif". Par exemple:
google.maps.event.addListener(map, 'idle', function() {
});
Alors que la réponse sélectionnée est la meilleure pour la plupart des circonstances. Si vous voulez contrôler le retard vous-même, vous pouvez simplement utiliser quelque chose comme;
var mapupdater;
{....}
google.maps.event.addListener(map, "bounds_changed", mapSettleTime);
function mapSettleTime() {
clearTimeout(mapupdater);
mapupdater=setTimeout(getMapMarkers,500);
}
Ajoutez un timeout, qui exécute votre code 500ms après le déclenchement de l'événement, chaque fois que l'événement se déclenche, effacez le timeout et créez-en un nouveau.
google.maps.event.addListener(map, 'bounds_changed', (function () {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
// here goes an ajax call
}, 500);
}
}()));Vous devriez vérifier comment fonctionne une fonction debounce. Un bel article de Taylor Case le définit comme suit:
Cette fonction est construite afin de limiter la quantité de fois a la fonction est appelée - scroll events, MouseMove events et keypress les événements sont tous d'excellents exemples d'événements que nous pourrions vouloir capturer, mais cela peut être très pénible si nous les capturons à chaque fois qu'ils feu.
Vous définissez donc la fonction quelque part dans votre code:
function debounce(fn, time) {
let timeout;
return function() {
const args = arguments;
const functionCall = () => fn.apply(this, args);
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
}
}
Ensuite, vous utilisez simplement cette fonction lors de l'ajout de votre écouteur:
google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));
Il semble que 250 ms soit une bonne fréquence à utiliser ici.
Voici un petit extrait qui supprimera tous les appels 'bound_changed' redondants:
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