javascript - marcar - infowindow google maps

Manejar eventos de clics en Google Maps JS API v3 mientras se ignoran los clics dobles

Question

Con Google Maps JS API v3, quiero colocar un marcador donde el usuario hace clic en el mapa, manteniendo el comportamiento predeterminado cuando el usuario hace doble clic (y no agrega ningún marcador en el mapa).

Pensé en definir un tiempo de espera en el evento de clic. Si se activa un evento de doble clic dentro de los próximos milisegundos, el tiempo de espera se cancela. Si no, el marcador se coloca en el mapa cuando expira el tiempo de espera. Pero realmente no parece ser la mejor solución.

¿Hay una forma más elegante de manejar esto?

Gracias.

Answer 1

Acabo de encontrar una solución hackish que funciona pero introduzco un pequeño tiempo de espera (200 ms, este es el mínimo para hacerlo funcionar, pero no sé si depende del cliente)

var update_timeout = null;

google.maps.event.addListener(map, ''click'', function(event){
    update_timeout = setTimeout(function(){
        do_something_here();
    }, 200);        
});

google.maps.event.addListener(map, ''dblclick'', function(event) {       
    clearTimeout(update_timeout);
});

¡Espero que esto ayude!

Answer 2

La forma más fácil de resolverlo.

var location;
var map = ...

google.maps.event.addListener(map, ''click'', function(event) {
    mapZoom = map.getZoom();
    startLocation = event.latLng;
    setTimeout(placeMarker, 600);
});

function placeMarker() {
    if(mapZoom == map.getZoom()){
        new google.maps.Marker({position: location, map: map});
    }
}

La solución de shogunpanda es mejor (ver abajo)

Answer 3

No estoy seguro, pero si agrega controladores de eventos a los eventos "hacer clic" y "hacer clic", donde dice poner un marcador en un clic y no realiza ninguna acción haciendo doble clic, entonces puede omitir la adición de tiempos de espera (la API de mapas puede diferir en qué se hace clic y en qué se hace doble clic)

google.maps.event.addListener(map, ''click'', function (event) {
        placeMarker(event.latLng);
    });
google.maps.event.addListener(map, ''dblclick'', function(event) { 
//DO NOTHING, BECAUSE IT IS DOUBLE CLICK
});

El placeMarker (latLng) es una función personalizada que agrega marcador en la ubicación determinada:

var marker = new google.maps.Marker({
        position: location,
        draggable: true,
        map: map
    });
map.setCenter(location);

Answer 4

Puede aprovechar los clics de doble clic si se trata de un doble clic, y los disparos de un solo clic en tales ocasiones solo una vez.

runIfNotDblClick = function(fun){
    if(singleClick){
        whateverurfunctionis();
    }
};

clearSingleClick = function(fun){
    singleClick = false;
};

singleClick = false;

google.maps.event.addListener(map, ''click'', function(event) {// duh! :-( google map zoom on double click!
    singleClick = true;
    setTimeout("runIfNotDblClick()", 500);
});

google.maps.event.addListener(map, ''dblclick'', function(event) {// duh! :-( google map zoom on double click!
     clearSingleClick();
});

Ver http://www.ilikeplaces.com

Answer 5

Si usa underscore.js o * lodash aquí hay una forma rápida y elegante de resolver este problema

// callback is wrapped into a debounce function that is called after
// 400 ms are passed, it provides a cancel function that can be used
// to stop it before it''s actually executed
var clickHandler = _.debounce(function(evt) {
  // code called on single click only, delayed by 400ms
  // adjust delay as needed.
  console.debug(''Map clicked with'', evt);
}, 400);
// configure event listeners for map
google.maps.event.addListener(map, ''click'', clickHandler);
google.maps.event.addListener(map, ''dblclick'', clickHandler.cancel);

* Debounce.cancel se implementa solo en lodash (con este compromiso ), underscore.js no lo implementa

Answer 6

Una forma más limpia de implementar el enfoque setTimeout() es activar eventos personalizados para clics individuales.

La siguiente función toma cualquier objeto de la interfaz de Google Maps (por ejemplo, mapa, marcador, polígono, etc.) y configura dos eventos personalizados:

singleclick : llamado 400ms después de un clic, si no se han producido otros clics

firstclick : se llama cada vez que se produce un clic, a menos que ya se haya producido un clic en los últimos 400 ms (esto es útil para mostrar algún tipo de respuesta inmediata al usuario).

function addSingleClickEvents(target) {
  var delay = 400;
  var clickTimer;
  var lastClickTime = 0;

  google.maps.event.addListener(target, ''click'', handleClick);
  google.maps.event.addListener(target, ''dblclick'', handleDoubleClick);

  function handleClick(e) {
    var clickTime = +new Date();

    var timeSinceLastClick = clickTime - lastClickTime;

    if(timeSinceLastClick > delay) {
      google.maps.event.trigger(target, ''firstclick'', e);

      clickTimer = setTimeout(function() {
        google.maps.event.trigger(target, ''singleclick'', e);
      }, delay);
    } else {
      clearTimeout(clickTimer);
    }

    lastClickTime = clickTime;
  }

  function handleDoubleClick(e) {
    clearTimeout(clickTimer);
    lastClickTime = +new Date();
  }
}

Puedes usarlo así:

var map = ....
addSingleClickEvents(map);
google.maps.event.addListener(map, ''singleclick'', function(event) {
    console.log("Single click detected at: " + event.latLng);
}