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

【问题标题】：How to conditionally fire click event on google map in angular如何有条件地以角度在谷歌地图上触发点击事件
【发布时间】：2021-06-23 12:38:41
【问题描述】：

在我的代码中，我希望在我的谷歌地图上以角度在 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 时才触发？

【问题讨论】：

标签： angular google-maps-api-3

【解决方案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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>

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

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

【讨论】：