javascript - google - marker draggable event

El evento de Google Map bounds_changed se activó varias veces al arrastrar

Question

Tengo un mapa de google con marcadores. Quiero que mis marcadores se actualicen cuando se mueva / amplíe el mapa ...

Google recomienda utilizar el evento bounds_changed para eso, pero cuando muevo el mapa, el evento se desencadena para cada píxel que muevo el mapa . Quiero que el mapa se actualice solo cuando el usuario dejó de mover el mapa, es decir, cuando soltó el botón del mouse después de arrastrarlo.

Cómo puedo hacer eso ?

Gracias

Answer 1

Agregue un tiempo de espera, que ejecuta su código 500 ms después de que se activa el evento, cada vez que el evento se dispara borra el tiempo de espera y crea uno nuevo.

google.maps.event.addListener(map, ''bounds_changed'', (function () {
    var timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // here goes an ajax call
        }, 500);
    }
}()));

Answer 2

Aquí hay un pequeño fragmento que eliminará todas las llamadas redundantes ''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 3

Debería verificar cómo funciona una función antirrebote. Un buen artículo de Taylor Case lo define de la siguiente manera:

Esta función se construye para limitar la cantidad de veces que se llama a una función: los eventos de desplazamiento, los eventos de desplazamiento de mouse y los eventos de pulsación de teclas son excelentes ejemplos de eventos que podríamos querer capturar, pero pueden ser bastante exigentes si los capturamos todos y cada uno tiempo que disparan

Entonces defines la función en algún lugar de tu código:

function debounce(fn, time) {
  let timeout;
  return function() {
    const args = arguments;
    const functionCall = () => fn.apply(this, args);
    clearTimeout(timeout);
    timeout = setTimeout(functionCall, time);
  }
}

Luego solo usa esa función cuando agrega su oyente:

google.maps.event.addListener(myMap, ''bounds_changed'', debounce(() => { /* Do something here */ }, 250));

Parece que 250 ms es una buena frecuencia para usar aquí.

Answer 4

Resulta que se trata de un error reportado: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371 .

El equipo de Google recomienda usar el evento "inactivo". Por ejemplo :

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

Answer 5

Si bien la respuesta seleccionada es mejor para la mayoría de las circunstancias. Si desea controlar el retraso usted mismo, simplemente puede usar algo como;

 var mapupdater;

 {....}

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


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

Answer 6

intenta usar tanto zoom_changed como dragend