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

Question

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

原来鼠标滚轮可以缩放地图，但现在需要按下 CTRL + 鼠标滚轮才能缩放。

我们该如何禁用此功能？ 我在文档中找不到任何信息：

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

- Dawood Awan

---

这个链接可能会对你有所帮助：https://dev59.com/gGEh5IYBdhLWcg3w0GOx - Brajesh Kanungo

@BrajeshKanungo 这与上述功能无关 - 这是Google Maps引入的新功能 - 我想要禁用它。 - Dawood Awan

好的，请告诉我您正在使用哪个 API 版本。 - Brajesh Kanungo

最新版本- https://maps.googleapis.com/maps/api/js?v=3.exp - Dawood Awan

这也刚刚出现在我们的网站上，可能是谷歌API的更新。 - Tom

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'
});

---

更新！自 Google 地图 3.35.6 版本以后，您需要将属性封装到选项包装器中：

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

感谢ealfonso提供的新信息

- kano

---

@DiegoAndrade 我不清楚细节。也许当时没有实现。但是它存在于版本 3.29（冻结），3.30（发布）及以上（3.exp，实验性）。 - kano

是的，它可以在 3.26、3.27、3.28 和 3.29 版本中使用。但从 3.30 开始就不能再使用了。至少目前是这样。 - Diego Andrade

我知道它存在。这就是重点。从 3.30 开始就不起作用了。我测试了所有这些版本。无论如何，现在它已经能够在 3.26 上运行了。 - Diego Andrade

最终得到了正确的答案。我花了很长时间在谷歌上搜索才找到这个答案。为什么谷歌没有将其设为默认值，我不理解。 - woens

太棒了，这是完美的解决方案。 - N Khan

Answer 2

如果您完全同意禁用滚动缩放，可以使用 scrollwheel: false。如果您提供缩放控件（zoomControl: true），用户仍然可以通过单击缩放按钮来缩放地图。

文档： https://developers.google.com/maps/documentation/javascript/reference （在页面上搜索“scrollwheel”）

const map = new google.maps.Map(mapElement, {
  center: { 0, 0 },
  zoom: 4,
  scrollwheel: false,
  zoomControl: true
});

- Brendan Benson

Answer 3

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

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

请注意，这也会在移动设备上隐藏它，所以你可以使用类似这样的内容来确保显示“请用两根手指移动地图”：

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

- Chumtarou

---

谢谢。我很惊讶更多的人不需要这个。这是一个非常令人分心的覆盖消息，几乎毁掉了地图体验。 - BaseZen

Answer 4

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

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

- ealfonso

Answer 5

由于我在地图上有一个覆盖层，所以我无法使 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 });
}

- MisterMystery