Отключите Ctrl + Scroll, чтобы увеличить карту Google

97

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

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

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

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

javascript google-maps

— Давуд Аван
источник

эта ссылка может помочь вам stackoverflow.com/questions/21992498/…

— Браджеш Канунго

@BrajeshKanungo, не имеющая отношения к вышеуказанной функции - это новая функция, представленная Google Maps - я хочу отключить ее.

— Давуд Аван

Хорошо, вы можете сказать мне, какую версию API вы используете.

— Браджеш Канунго

последняя версия - maps.googleapis.com/maps/api/js?v=3.exp

— Давуд Аван

Это только что появилось на нашем сайте, так что, вероятно, обновление API

— Том

154

Вам нужно перейти 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'
});

Обновить! Начиная с Google Maps, 3.35.6вам нужно заключить свойство в оболочку параметров:

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

Спасибо ealfonsoза новую информацию

— Кано
источник

@DiegoAndrade Я не знаю подробностей. возможно, тогда это не было реализовано. Но он присутствует в версиях 3.29(замороженная), 3.30(выпуск) и выше ( 3.expэкспериментальная).

— kano

Да, @Kano, в этих документах эта функция все еще присутствует, но в моих тестах здесь она не работает. Я действительно не знаю, почему они удалили это :(

— Diego Andrade

1

Я знаю, что это присутствует. В этом-то и дело. Начиная с 3.30Не работает. Все эти версии я тестировал. Во всяком случае, сейчас он работает с 3.26.

— Диего Андраде

3

наконец-то правильный ответ. Мне потребовалось много времени на поиск в Google. Я не понимаю, почему Google не сделал это по умолчанию.

— woens

2

Бинго, это идеальное решение.

— N Khan

17

Если вы согласны с полным отключением прокрутки и масштабирования, вы можете использовать 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
});

— Брендан Бенсон
источник

7

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

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

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

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

— Чумтару
источник

Спасибо. Я удивлен, что многие люди этого не хотят. Это очень отвлекающее наложенное сообщение, которое практически мешает мне воспринимать карту.

— BaseZen

5

Вложение gestureHandlingвнутри optionsсвойства у меня работало в версии "3.35.6".

map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        options:{
            gestureHandling: 'greedy'
        }
    });

— Ealfonso
источник

4

Мне не удалось заставить 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 });
}

— Мистер Тайна
источник