jQuery 如何使用 Google Maps API 禁用鼠标滚轮缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2330197/
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
How to disable mouse scroll wheel scaling with Google Maps API
提问by aaronrussell
I am using Google Maps API (v3) to draw a few maps on a page. One thing I'd like to do is disable zooming when you scroll the mouse wheel over the map, but I'm unsure how.
我正在使用 Google Maps API (v3) 在页面上绘制一些地图。我想做的一件事是在地图上滚动鼠标滚轮时禁用缩放，但我不确定如何。
I have disabled the scaleControl (i.e. removed the scaling UI element), but this doesn't prevent scroll wheel scaling.
我已经禁用了 scaleControl（即删除了缩放 UI 元素），但这并不能阻止滚轮缩放。
Here is part of my function (it's a simple jQuery plugin):
这是我的功能的一部分（它是一个简单的 jQuery 插件）：
$.fn.showMap = function(options, addr){
options = $.extend({
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);
// Code cut from this example as not relevant
};
回答by Daniel Vassallo
In version 3 of the Maps API you can simply set the scrollwheeloption to false within the MapOptionsproperties:
在 Maps API 的第 3 版中，您可以简单地将MapOptions属性中的scrollwheel选项设置为 false ：
options = $.extend({
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);
If you were using version 2 of the Maps API you would have had to use the disableScrollWheelZoom()API call as follows:
如果您使用的是 Maps API 的第 2 版，则必须使用disableScrollWheelZoom()API 调用，如下所示：
map.disableScrollWheelZoom();
The scrollwheelzooming is enabled by default in version 3 of the Maps API, but in version 2 it is disabled unless explicitly enabled with the enableScrollWheelZoom()API call.
该scrollwheel变焦默认情况下，在地图API第3版启用，但在第2版，除非与明确启用已禁用enableScrollWheelZoom()的API调用。
回答by Simon East
Daniel's codedoes the job (thanks a heap!). But I wanted to disable zooming completely. I found I had to use all four of these options to do so:
Daniel 的代码完成了这项工作（非常感谢！）。但我想完全禁用缩放。我发现我必须使用所有四个选项来做到这一点：
{
zoom: 14, // Set the zoom level manually
zoomControl: false,
scaleControl: false,
scrollwheel: false,
disableDoubleClickZoom: true,
...
}
See: MapOptions object specification
请参阅：MapOptions 对象规范
回答by Felipe Pereira
Just in case you want to do this dynamically;
以防万一您想动态执行此操作；
function enableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: true });
}
function disableScrollwheel(map) {
if(map) map.setOptions({ scrollwheel: false });
}
Sometimes you have to show something "complex" over the map (or the map is a small part of the layout), and this scroll zooming gets in the middle, but once you have a clean map, this way of zooming is nice.
有时你必须在地图上显示一些“复杂”的东西（或者地图是布局的一小部分），这种滚动缩放会在中间，但是一旦你有了一张干净的地图，这种缩放方式就很好了。
回答by Creatif_IV
Keep it simple! Original Google maps variable, none of the extra stuff.
把事情简单化！原始的谷歌地图变量，没有额外的东西。
var mapOptions = {
zoom: 16,
center: myLatlng,
scrollwheel: false
}
回答by Kar.ma
As of now (October 2017) Google has implemented a specific property to handle the zooming/scrolling, called gestureHandling. Its purpose is to handle mobile devices operation, but it modifies the behaviour for desktop browsers as well. Here it is from official documentation:
截至目前（2017 年 10 月），Google 已经实现了一个特定的属性来处理缩放/滚动，称为gestureHandling. 它的目的是处理移动设备操作，但它也会修改桌面浏览器的行为。这是来自官方文档：
function initMap() { var locationRio = {lat: -22.915, lng: -43.197}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: locationRio, gestureHandling: 'none' });The available values for gestureHandling are:
'greedy': The map always pans (up or down, left or right) when the user swipes (drags on) the screen. In other words, both a one-finger swipe and a two-finger swipe cause the map to pan.'cooperative': The user must swipe with one finger to scroll the page and two fingers to pan the map. If the user swipes the map with one finger, an overlay appears on the map, with a prompt telling the user to use two fingers to move the map. On desktop applications, users can zoom or pan the map by scrolling while pressing a modifier key (the ctrl or ? key).'none': This option disables panning and pinching on the map for mobile devices, and dragging of the map on desktop devices.'auto'(default): Depending on whether the page is scrollable, the Google Maps JavaScript API sets the gestureHandling property to either'cooperative'or'greedy'
function initMap() { var locationRio = {lat: -22.915, lng: -43.197}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: locationRio, gestureHandling: 'none' });手势处理的可用值是：
'greedy'：当用户滑动（拖动）屏幕时，地图始终平移（向上或向下、向左或向右）。换句话说，单指滑动和双指滑动都会导致地图平移。'cooperative'：用户必须用一根手指滑动才能滚动页面，用两根手指滑动地图。如果用户用一根手指滑动地图，地图上会出现一个叠加层，并提示用户用两根手指移动地图。在桌面应用程序中，用户可以通过在按下修饰键（ctrl 或 ? 键）的同时滚动来缩放或平移地图。'none'：此选项禁用移动设备在地图上的平移和捏合，以及在桌面设备上拖动地图。'auto'（默认）：根据页面是否可滚动，Google Maps JavaScript API 将gestureHandling 属性设置为'cooperative'或'greedy'
In short, you can easily force the setting to "always zoomable" ('greedy'), "never zoomable" ('none'), or "user must press CRTL/? to enable zoom" ('cooperative').
简而言之，您可以轻松地将设置强制为“始终可缩放”( 'greedy')、“不可缩放”( 'none') 或“用户必须按 CRTL/? 才能启用缩放”( 'cooperative')。
回答by Emiliano Díaz
I created a more developed jQuery plugin that allows you to lock or unlock the map with a nice button.
我创建了一个更发达的 jQuery 插件，它允许您使用一个漂亮的按钮来锁定或解锁地图。
This plugin disables the Google Maps iframe with a transparent overlay div and adds a button for unlockit. You must press for 650 milliseconds to unlock it.
这个插件通过一个透明的覆盖 div 禁用谷歌地图 iframe 并添加一个解锁按钮。您必须按住 650 毫秒才能解锁。
You can change all the options for your convenience. Check it at https://github.com/diazemiliano/googlemaps-scrollprevent
为方便起见，您可以更改所有选项。在https://github.com/diazemiliano/googlemaps-scrollprevent 上查看
Here's some example.
这里有一些例子。
(function() {
$(function() {
$("#btn-start").click(function() {
$("iframe[src*='google.com/maps']").scrollprevent({
printLog: true
}).start();
return $("#btn-stop").click(function() {
return $("iframe[src*='google.com/maps']").scrollprevent().stop();
});
});
return $("#btn-start").trigger("click");
});
}).call(this);.embed-container {
position: relative !important;
padding-bottom: 56.25% !important;
height: 0 !important;
overflow: hidden !important;
max-width: 100% !important;
}
.embed-container iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
.mapscroll-wrap {
position: static !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a> <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>回答by racl101
Just in case, you are using the GMaps.jslibrary, which makes it a bit simpler to do things like Geocoding and custom pins, here's how you solve this issue using the techniques learned from the previous answers.
以防万一，您正在使用GMaps.js库，这使得地理编码和自定义图钉等操作变得更简单，以下是您如何使用从之前的答案中学到的技术解决此问题的方法。
var Gmap = new GMaps({
div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
lat: 51.044308,
lng: -114.0630914,
zoom: 15
});
// To access the Native Google Maps object use the .map property
if(Gmap.map) {
// Disabling mouse wheel scroll zooming
Gmap.map.setOptions({ scrollwheel: false });
}
回答by andilabs
In my case the crucial thing was to set in 'scrollwheel':falsein init. Notice: I am using jQuery UI Map. Below is my CoffeeScriptinit function heading:
在我的情况下，关键是'scrollwheel':false在 init.d 中设置。注意：我正在使用jQuery UI Map. 下面是我的CoffeeScriptinit 函数标题：
$("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
回答by AlbertSamuel
For someone that wondering how to disable the Javascript Google Map API
对于想知道如何禁用Javascript Google Map API 的人
It will enablethe zooming scroll if you click the map once. And disableafter your mouse exit the div.
如果您单击一次地图，它将启用缩放滚动。并在鼠标退出 div 后禁用。
Here is some example
这是一些例子
var map;
var element = document.getElementById('map-canvas');
function initMaps() {
map = new google.maps.Map(element , {
zoom: 17,
scrollwheel: false,
center: {
lat: parseFloat(-33.915916),
lng: parseFloat(151.147159)
},
});
}
//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part.big-placeholder {
background-color: #1da261;
height: 300px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div class="big-placeholder">
</div>
<!-- START IMPORTANT part -->
<div class="map-container">
<div id="map-canvas" style="min-height: 400px;"></div>
</div>
<!-- END IMPORTANT part-->
<div class="big-placeholder">
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
</script>
</body>
</html>回答by Kiran Kanzar
You just need to add in map options:
您只需要添加地图选项：
scrollwheel: false
