我可以使用选项滚轮在Google地图中使用滚动元素:是吗?

问题描述 投票:-1回答:2

我有一个带有滚轮选项的Google地图:true

我在Google地图中添加了一个OverlayView,其中包含带有可滚动内容的HTML。当我将鼠标悬停/单击进入OverlayView时,鼠标滚轮将继续缩放Google地图,而不是滚动Overlayview的内容。

如何防止此行为发生?

我已经尝试将Google地图的选项更改为滚动:false作为OverlayView的onclick事件,但这似乎不会触发。

google-maps
2个回答
1
投票

您可以将HTML内容放在InfoWindow中并在地图上使用gestureHandling : "greedy",以便在光标位于地图上时可以控制缩放,但在InfoWindow上则不能。 (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
投票

InfoWindow可能是解决这个问题的正确方法,但它不是我们想要遵循的路线,因为它意味着要显着改变我们的代码来处理OverlayView中的InfoWindows。

相反,我们最终在OverlayView上添加mouseover和mouseout事件的监听器,然后根据鼠标事件切换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');
        })
© www.soinside.com 2019 - 2024. All rights reserved.