禁用Ctrl +滚动缩放谷歌地图

Question

有人知道如何禁用 CTRL + Scroll吗？

首先移动鼠标滚轮时，地图会放大/缩小。但现在要求按 CTRL +鼠标滚轮滚动放大/缩小。

我们如何禁用此功能？我似乎无法在文档中找到任何内容：

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

Answer 1

您需要将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'
});

Answer 2

如果您可以完全禁用滚动缩放，则可以使用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
});

Answer 3

由于我在地图上有叠加层，因此无法获得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 });
}

Answer 4

如果您只想隐藏覆盖层，但仍禁用滚动和缩放功能（像以前一样），则可以使用CSS来隐藏覆盖层：

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

请注意，这也将其隐藏在移动设备中，因此您可以使用类似的方法来确保其显示“用两根手指移动地图”：

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

Answer 5

将gestureHandling嵌套在options属性中对我来说适用于版本“ 3.35.6”。

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