Javascript 禁用 Ctrl + Scroll to Zoom google maps
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45729047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable the Ctrl + Scroll to Zoom google maps
提问by Dawood Awan
Does anybody know how to disable the CTRL+ Scroll?
有人知道如何禁用CTRL+Scroll吗？
First when the mouse wheel was moved the Map would Zoom in/out. But now it asks to press CTRL+ Mouse Wheel Scroll to Zoom in/out.
首先，当鼠标滚轮移动时，地图会放大/缩小。但现在它要求按CTRL+鼠标滚轮滚动放大/缩小。
How do we disable this feature? I can't seem to find anything in the documentation:
我们如何禁用此功能？我似乎无法在文档中找到任何内容：
https://developers.google.com/maps/documentation/javascript/controls#ControlOptions
https://developers.google.com/maps/documentation/javascript/controls#ControlOptions
回答by kano
You need to pass gestureHandling: 'greedy'to your map options.
您需要传递gestureHandling: 'greedy'给您的地图选项。
Documentation: https://developers.google.com/maps/documentation/javascript/interaction#gestureHandling
文档：https: //developers.google.com/maps/documentation/javascript/interaction#gestureHandling
For example:
例如：
const map = new google.maps.Map(mapElement, {
center: { 0, 0 },
zoom: 4,
gestureHandling: 'greedy'
});
Update!Since Google Maps 3.35.6you need to encase the property into an options wrapper:
更新！由于 Google 地图，3.35.6您需要将属性封装到选项包装器中：
const map = new google.maps.Map(mapElement, {
center: { 0, 0 },
zoom: 4,
options: {
gestureHandling: 'greedy'
}
});
Thank you ealfonsofor the new info
谢谢你ealfonso的新信息
回答by Brendan Benson
If you're OK with disabling scroll-to-zoom entirely, you can use scrollwheel: false. The user will still be able to zoom the map by clicking the zoom buttons if you provide them with the zoom control (zoomControl: true).
如果您可以完全禁用滚动缩放，则可以使用scrollwheel: false. 如果您为用户提供了缩放控件 ( zoomControl: true) ，则用户仍然可以通过单击缩放按钮来缩放地图。
Documentation: https://developers.google.com/maps/documentation/javascript/reference(search the page for "scrollwheel")
文档：https: //developers.google.com/maps/documentation/javascript/reference（在页面中搜索“滚轮”）
const map = new google.maps.Map(mapElement, {
center: { 0, 0 },
zoom: 4,
scrollwheel: false,
zoomControl: true
});
回答by Chumtarou
If you are looking to only hide the overlay but still disable the ability to scroll and zoom (like before), you could use CSS to hide the overlay:
如果您只想隐藏叠加层但仍然禁用滚动和缩放的功能（像以前一样），您可以使用 CSS 来隐藏叠加层：
.gm-style-pbc {
opacity: 0 !important;
}
Note this will hide it for mobile as well so you could use something like this to ensure it shows "use two fingers to move the map":
请注意，这也会为移动设备隐藏它，因此您可以使用类似的方法来确保它显示“使用两个手指移动地图”：
@media only screen and ( min-width: 980px ) {
.gm-style-pbc {
opacity: 0 !important;
}
}
回答by ealfonso
Nesting the gestureHandlingwithin an optionsproperty worked for me on version "3.35.6".
在版本“3.35.6”上嵌套gestureHandling一个options属性对我有用。
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
options:{
gestureHandling: 'greedy'
}
});
回答by MisterMystery
I wasn't able to get the gestureHandling: 'greedy'fix to work for me since I had an overlay over the map. I ended up detecting the mousewheelevent and setting the ctrlproperty to true.
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 });
}
