Увеличение с помощью двойного щелчка с disableDefaultUI: true

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, как следует из его названия, отключает пользовательский интерфейс по умолчанию, а не поведение жестов по умолчанию, поэтому нет причины, по которой это отключает масштабирование двойным щелчком (доказательство - фрагмент ниже).Вы должны убедиться, что вы не использовали disableDoubleClickZoom или не установили gestureHandling на none, но мы не можем сказать, потому что вы не поделились этой частью своего кода.

Что касается срабатывания прослушивателя кликовНаряду с двойным щелчком, лучший способ - установить таймаут в слушателе одного щелчка и очистить его в двойном щелчке слушателя.Вам необходимо определиться с продолжительностью тайм-аута (здесь она установлена ​​на 200 мс).

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