Можно ли использовать элемент прокрутки на карте Google с параметром scrollwheel: true? - PullRequest
Новая
       17

Можно ли использовать элемент прокрутки на карте Google с параметром scrollwheel: true?

0 голосов
/ 18 апреля 2019

У меня есть карта Google с параметром колесо прокрутки: true

Я добавляю OverlayView на карту Google, которая содержит HTML с прокручиваемым контентом. При наведении курсора мыши на OverlayView / прокручивание, колесо прокрутки мыши продолжает увеличивать масштаб карты Google, а не прокручивать содержимое OverlayView.

Как я могу предотвратить это поведение?

Я попытался изменить параметры карты Google на scrollwheel: false как событие onclick в OverlayView, но, похоже, это не сработает.

Ответы [ 2 ]

1 голос
/ 22 апреля 2019

Вы можете поместить свой HTML-контент в InfoWindow и использовать gestureHandling : "greedy" на своей карте, чтобы можно было управлять масштабированием, когда курсор находится на карте, а не в InfoWindow.(Содержимое информационного окна все еще можно прокручивать)

Пример скрипта: https://jsfiddle.net/471fmzyv/

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru,
    gestureHandling : "greedy"
  });
0 голосов
/ 23 апреля 2019

InfoWindow, вероятно, было правильным подходом к решению этой проблемы, но мы не хотели идти по этому пути, поскольку это означало бы значительное изменение нашего кода для обработки InfoWindows в OverlayView.

Вместо этого мы закончили тем, что добавили прослушиватели для событий mouseover и mouseout в OverlayView, а затем переключили Google Map и поведение страницы на основе событий мыши: 

        // Prevent page body and google map from handling the mouse
        // Wheel events when hovering over pin group content
        google.maps.event.addDomListener(groupDiv, 'mouseover', function () {
            gMap.setOptions({
                disableDoubleClickZoom: true,
                navigationControl: false,
                scaleControl: false,
                draggable: false
            });
            $('html').css('overflow', 'hidden');
        })

        // Restore control to page body page body and google map 
        // when user is no longer hovering pin group content
        google.maps.event.addDomListener(groupDiv, 'mouseout', function () {
            gMap.setOptions({
                disableDoubleClickZoom: false,
                navigationControl: true,
                scaleControl: true,
                draggable: true
            });
            $('html').css('overflow', 'auto');
        })
...