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

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

更新！ 由于 Google 地图3.35.6，您需要将该属性封装到选项包装器中：

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  options: {
    gestureHandling: 'greedy'
  }
});

感谢您ealfonso提供的新信息

---

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

---

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

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

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

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

---

在版本“3.35.6”上，将 gestureHandling 嵌套在 options 属性中对我有用。

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

---

我无法让 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 });
}

---