web-dev-qa-db-fra.com

L'événement Google Map bounds_changed s'est déclenché plusieurs fois lors du déplacement

J'ai une carte google avec des marqueurs. Je veux que mes marqueurs soient rafraîchis lorsque la carte est déplacée/zoomée ...

Google recommande d'utiliser l'événement bounds_changed pour cela, mais quand je déplace la carte, l'événement est déclenché pour chaque pixel que je déplace la carte. Je souhaite que la carte soit actualisée uniquement lorsque l'utilisateur a cessé de déplacer la carte, c'est-à-dire lorsqu'il a relâché le bouton de la souris après avoir fait glisser.

Comment puis je faire ça ?

javascriptgoogle-mapsdom-events
57
Matthieu Napoli

Il s'avère que c'était un bug signalé: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371 .

L'équipe Google recommande d'utiliser l'événement "inactif". Par exemple :

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

Alors que la réponse sélectionnée est la meilleure pour la plupart des circonstances. Si vous souhaitez 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);
 }
10
0x1b

Ajoutez un délai d'expiration, qui exécute votre code 500 ms après le déclenchement de l'événement, chaque fois que l'événement se déclenche, supprimez le délai d'expiration 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);
    }
}()));
6
Himanshu Khurana

Vous devez vérifier le fonctionnement d'une fonction anti-rebond. A Nice article de Taylor Case définissez-le comme suit:

Cette fonction est conçue afin de limiter le nombre d'appels d'une fonction - les événements de défilement, les événements de déplacement de souris et les événements de pression sur une touche sont tous d'excellents exemples d'événements que nous pourrions vouloir capturer, mais peuvent être assez éprouvants si nous les capturons chaque fois fois qu'ils tirent.

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.

3
Mau Muñoz

Voici un petit extrait qui supprimera tous les appels redondants '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
1
yadavr

essayez d'utiliser à la fois zoom_changed et dragend

1
Galen