Обработка событий кликов в Google Maps JS API v3 без игнорирования двойных кликов

Question

В Google Maps JS API v3 я хочу убрать маркер, где пользователь нажимает на карту, сохраняя при этом поведение по умолчанию, когда пользователь дважды щелкает (и не добавляет маркер на карту).1002 * Я думал об определении времени ожидания для события щелчка.Если событие двойного щелчка вызывается в течение следующих нескольких миллисекунд, тайм-аут отменяется.Если нет, маркер размещается на карте по истечении времени ожидания.Но на самом деле это не выглядит лучшим решением.

Есть ли более элегантный способ справиться с этим?

Спасибо.

Answer 1

Я только что нашел хакерское решение, которое работает, но вводит небольшое время ожидания (200 мс, это минимум, чтобы заставить его работать, но я не знаю, зависит ли это от клиента)

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);
});

Надеюсь, это поможет!

Answer 2

Самый простой способ ее решить.

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});
    }
}

shogunpanda решение лучше (см. Ниже)

Answer 3

Вы можете воспользоваться, dblclick срабатывает, если это двойной щелчок, и один клик срабатывает в таких случаях только один раз.

Answer 4

Если вы используете underscore.js или * lodash , вот быстрый и элегантный способ решения этой проблемы

// 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 реализован только в lodash (с this commit ), underscore.js не реализует его

Answer 5

Более чистый способ реализации подхода setTimeout() - запуск пользовательских событий для одного клика.

Следующая функция берет любой объект интерфейса Google Maps (например, карту, маркер, многоугольник и т. Д.) И устанавливает два пользовательских события:

singleclick: вызывается через 400 мсек после клика, если других щелчков не было

firstclick: вызывается всякий раз, когда происходит событие щелчка, если только за последние 400 мс не было щелчка (это удобно для отображения какой-либо немедленной обратной связи с пользователем)

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();
  }
}

Вы можете использовать его так:

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

Answer 6

Я не уверен, но если вы добавите обработчики событий в оба события 'click' и 'dblclick', где вы говорите, чтобы поставить маркер на клик, и не предпринимать никаких действий на двойной клик, то вы можетепропустить добавление тайм-аутов (API карт может отличаться от того, что является кликом, а что - двойным кликом)

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
});

PlaceMarker (latLng) - это пользовательская добавленная функция, которая добавляет маркер в указанное место:

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