Отключить сочетание клавиш Ctrl + прокрутка колеса для зума карты Google

кто-нибудь знает, как отключить CTRL + Scroll?

во-первых, когда колесо мыши было перемещено карта будет увеличивать/уменьшать масштаб. Но теперь он просит нажать CTRL + прокрутка колесика мыши для увеличения/уменьшения масштаба.

Как отключить эту функцию? Кажется, я ничего не могу найти в документация:

https://developers.google.com/maps/documentation/javascript/controls#ControlOptions

4 57
javascript google-maps

4 ответа:

вам нужно пройти gestureHandling: 'greedy' в параметрах карты.

документация: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling

например:

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  gestureHandling: 'greedy'
});
100

Если вы в порядке с отключением прокрутки до масштабирования полностью, вы можете использовать scrollwheel: false. Пользователь по-прежнему сможет увеличить карту, нажав кнопки масштабирования, если вы предоставите им управление масштабированием (zoomControl: true).

документация: https://developers.google.com/maps/documentation/javascript/reference (найдите на странице "колесо прокрутки")

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  scrollwheel: false,
  zoomControl: true
});
11

Я не смог получить gestureHandling: 'greedy' исправлена работа для меня, так как у меня было наложение на карту. Я закончил тем, что обнаружил mousewheel событие и задание ctrl свойство true. 

// Load maps and attach event listener to scroll event.
var $map = $('.map');
$map[0].addEventListener('wheel', wheelEvent, true);         

function wheelEvent(event) {
    // Set the ctrlKey property to true to avoid having to press ctrl to zoom in/out.
    Object.defineProperty(event, 'ctrlKey', { value: true });
}
3

Если вы хотите только скрыть наложение, но по-прежнему отключить возможность прокрутки и масштабирования (как и раньше), вы можете использовать CSS, чтобы скрыть наложение:

.gm-style-pbc {
opacity: 0 !important;
}

обратите внимание, что это скроет его для мобильных устройств, так что вы можете использовать что-то вроде этого, чтобы убедиться, что он показывает "использовать два пальца для перемещения карты":

@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}
0