Блог

Главная - Вопросы по программированию - Как условно запустить событие клика на карте Google в angular

Как условно запустить событие клика на карте Google в angular

#angular #google-maps-api-3

Вопрос:

В моем коде я хочу, чтобы между щелчком и щелчком мыши на моей карте Google в angular выполнялось другое действие. Мне интересно, как я могу это сделать. Я регистрирую своих слушателей вот так

  google.maps.event.addListener(polygon, 'click', (event) =>  {
      console.log('We clicked the polygon');
      console.log(polygon);
  });

  google.maps.event.addListener(polygon, 'dblclick', (event) =>  {
    console.log('We double clicked the polygon');
    console.log(polygon);
  });

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

Ответ №1:

Установите время ожидания (здесь 500 мс) для события щелчка и отмените его при двойном щелчке.

 function initialize() {

  var myLatLng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  let t;

  google.maps.event.addListener(map, 'click', (event) => {

    t = setTimeout(function() {
      console.log('click');
    }, 500);
  });

  google.maps.event.addListener(map, 'dblclick', (event) => {
    console.log('double click');
    clearTimeout(t);
  });
} 
 #map-canvas {
  height: 180px;
} 
 <div id="map-canvas"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initialize" async defer></script>

Обратите внимание, что это не очень надежно, потому что :

  1. Мы не знаем точного времени ожидания, разрешенного для запуска события двойного щелчка в API, и
  2. Похоже, существует проблема в последовательности, в которой click dblclick события и срабатывают при более медленном двойном щелчке. Я сообщил об этом здесь.
Метки: