Question

在我的应用程序中，所有默认功能都通过以下方式禁用：

disableDefaultUI: true

然后单击将绑定到placeMarker函数。

mapObj.addListener('click',
    (event) => {
        this.placeMarker(event.latLng) // creates a marker, works fine.
    }
)

我想要实现的是，我想在 dblclick 时缩放地图（与默认功能一样），但是我不希望在双击时触发点击监听器。

mapObj.addListener('dblclick',
    (event) => {
        console.log("This doesn't fire when I double click")
        // I expect only this to fire.
    }
)

当我双击该按钮时不会触发，而是单击侦听器功能起作用。

Answer 1

顾名思义，

disableDefaultUI会禁用默认UI，而不是默认手势行为，因此没有理由禁用双击缩放（下面的代码证明）。您应该检查自己是否没有使用disableDoubleClickZoom或将gestureHandling设置为none，但是由于您尚未共享那部分代码，因此我们无法确定。

关于点击侦听器与双击一起触发，最好的方法是在单次点击侦听器中设置超时，并在双击侦听器中将其清除。您需要确定超时长度（此处设置为200ms）。

function initialize() {

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

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

  var update_timeout = null;

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

    update_timeout = setTimeout(function() {
      console.log('click');
    }, 200);

  });

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

#map-canvas {
  height: 180px;
}

<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>

Answer 2

您应该将其设置为事件监听器

mapObj.addEventListener('dblclick',
    (event) => {
        console.log("This should fire when I double click")
    }
)

使用disableDefaultUI双击缩放

2 个答案: