Блог

Главная - Вопросы по программированию - Как воспроизвести взаимодействие Google Maps и leaflet.js (трекпад и мобильный телефон)

Как воспроизвести взаимодействие Google Maps и leaflet.js (трекпад и мобильный телефон)

#javascript #google-maps #leaflet #mousewheel #pinchzoom

#javascript #google-карты #брошюра #колесо мыши #pinchzoom

Вопрос:

Мне любопытно, как воссоздать способ масштабирования с помощью пинча в таких картографических инструментах, как Google Maps и leaflet.js

На любом другом сайте, когда вы увеличиваете масштаб, все окна браузера увеличиваются при любом увеличении.

На Картах Google или Leaflet.js , когда вы нажимаете на масштаб карты, кажется, что он переопределяет эту функциональность и увеличивает и уменьшает масштаб карты точно так же, как если бы вы прокручивали ее пальцами или колесиком мыши.

Как они могут это сделать?

Чтобы уточнить — я также не хочу отключать масштабирование в окне просмотра. Я просто хочу, чтобы определенный раздел страницы игнорировал стандартное масштабирование (с помощью трекпада или мобильного устройства) и вместо этого интерпретировал масштабирование как только стандартное событие колеса прокрутки

Комментарии:

1. если вы используете фреймворк, вам нужно будет использовать комбинацию библиотеки анимации и библиотеки жестов. также я считаю, что для divs с определенным свойством css вы можете отключить поведение касания по умолчанию, но, к сожалению, я не помню с головы до ног. последний раз, когда я помню, что читал об этом, был в документации react-use-gesture . надеюсь, это поможет

Ответ №1:

Кажется, это работает, но если у кого-нибудь есть лучшее предложение, дайте мне знать.

 element.addEventListener('wheel', event => {
    const { ctrlKey } = event
    if (ctrlKey) {
         event.preventDefault();
         return
        }
      }, { passive: false })

Я указываю div, и теперь масштабирование работает везде, кроме этого элемента

Метки: