时间戳

首页 > 解决方案 > 如何有条件地以角度在谷歌地图上触发点击事件

angular - 如何有条件地以角度在谷歌地图上触发点击事件

问题描述

在我的代码中，我希望在我的谷歌地图上以角度在 click 和 dblclick 之间进行不同的操作。我想知道我该怎么做。我像这样注册我的听众

 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 时间以等待可能的 dblclick 并且只有在我们没有触发 dblclick 时才触发？

标签： angulargoogle-maps-api-3

解决方案

为单击事件设置超时（此处为 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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

请注意，这不是很可靠，因为：

  1. 我们不知道在 API 中触发双击事件所允许的确切超时时间，并且
  2. 在进行较慢的双击时触发click和事件的顺序似乎存在问题。dblclick我在这里报告了。

推荐阅读