使用disableDefaultUI雙擊縮放

Question

在我的應用程序中，所有默認功能都被禁用：

disableDefaultUI: true

然后單擊綁定到placeMarker函數。

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

我想要實現的是，我想在dblclick時縮放地圖（如默認功能），但是我不希望在雙擊時觸發Click監聽器。

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