禁用Ctrl +滚动以缩放Google地图

95

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

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

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

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

javascript google-maps

— 达伍德·阿万（Dawood Awan）
source

这个链接可以帮助你stackoverflow.com/questions/21992498/...

— Brajesh Kanungo

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

— Dawood Awan

好的，您能告诉我您使用的是哪个API版本。

— Brajesh Kanungo

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

— Dawood Awan

这也刚刚出现在我们的网站上，因此可能是googles API的更新

— Tom，

153

您需要传递gestureHandling: 'greedy'给地图选项。

文档：https : //developers.google.com/maps/documentation/javascript/interaction#gesture处理

例如：

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

更新！从Google Maps开始，3.35.6您需要将属性封装到选项包装中：

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

谢谢你ealfonso的新信息

— 卡诺
source

@DiegoAndrade我不知道细节。也许那时还没有实现。但是它存在于3.29（冻结），3.30（发行）和更高版本（3.exp，实验）中。

— 卡诺

是的@Kano，在这些文档中此功能仍然存在，但是在我的测试中，此功能不起作用。我真的不知道为什么他们删除了这个:(

— Diego Andrade

1

我知道它存在。这才是重点。从开始3.30它不起作用。我测试了所有这些版本。无论如何，它现在可以使用3.26。

— Diego Andrade

3

最后是正确的答案。为此花了我很长时间。为什么Google不将其设为默认值超出了我。

— woens '18

2

宾果游戏，这是完美的解决方案。

— N汗

17

如果可以完全禁用滚动缩放功能，则可以使用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）
source

7

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

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

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

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

— 春太郎
source

谢谢。令我惊讶的是，更多的人不希望这样做。这是一个非常分散注意力的叠加消息，实际上对我来说破坏了地图体验。

— BaseZen

5

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

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

— 艾尔方索
source

4

由于无法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 });
}

— 神秘先生
source