我有一个带有滚轮选项的Google地图:true
我在Google地图中添加了一个OverlayView,其中包含带有可滚动内容的HTML。当我将鼠标悬停/单击进入OverlayView时,鼠标滚轮将继续缩放Google地图,而不是滚动Overlayview的内容。
如何防止此行为发生?
我已经尝试将Google地图的选项更改为滚动:false作为OverlayView的onclick事件,但这似乎不会触发。
您可以将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"
});
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');
})