如何使用Google地图API禁用鼠标滚轮缩放

我正在使用Google Maps API（v3）在页面上绘制几张地图。 有一件事我想要做的是当鼠标滚轮在地图上滚动时禁用缩放，但我不确定如何。

我已经禁用了scaleControl（即去除了缩放UI元素），但是这并不妨碍滚动缩放。

这里是我的函数的一部分（这是一个简单的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 }; 

Answer 1

在Maps API的第3版中，您只需在MapOptions属性中将滚轮选项设置为false：

 options = $.extend({ scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, draggable: false, mapTypeId: google.maps.MapTypeId.ROADMAP }, options); 

如果您使用的是Maps API版本2，则必须使用disableScrollWheelZoom（） API调用，如下所示：

 map.disableScrollWheelZoom(); 

在Maps API的版本3中默认启用scrollwheel缩放，但在版本2中，除非通过enableScrollWheelZoom() API调用显式启用，否则它将被禁用。

Answer 2

Daniel的代码完成这项工作（谢谢一堆！）。 但我想完全禁用缩放。 我发现我不得不使用这四个选项来做到这一点：

 { zoom: 14, // Set the zoom level manually zoomControl: false, scaleControl: false, scrollwheel: false, disableDoubleClickZoom: true, ... } 

请参阅： MapOptions对象规范

Answer 3

以防万一你想dynamic地做到这一点;

 function enableScrollwheel(map) { if(map) map.setOptions({ scrollwheel: true }); } function disableScrollwheel(map) { if(map) map.setOptions({ scrollwheel: false }); } 

有时你必须在地图上显示一些“复杂”的东西（或者地图只是布局的一小部分），而这个滚动缩放就在中间，但是一旦你有了一个干净的地图，这种缩放的方式就不错了。

Answer 4

把事情简单化！ 原来的谷歌地图variables，没有额外的东西。

  var mapOptions = { zoom: 16, center: myLatlng, scrollwheel: false } 

Answer 5

在我的情况下，关键是要设置'scrollwheel':false初始化时为'scrollwheel':false 。 注意：我正在使用jQuery UI Map 。 以下是我的CoffeeScript初始化函数标题：

  $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) -> 

Answer 6

以防万一，您正在使用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 }); } 

Answer 7

我创build了一个更加开发的jQuery插件，允许你用一个漂亮的buttonlocking或解锁地图。

这个插件使用透明覆盖div来禁用Google Maps iframe，并添加一个unlockitbutton。 您必须按下650毫秒才能解锁。

您可以更改所有选项以方便您。 在https://github.com/diazemiliano/googlemaps-scrollprevent查看;

这是一些例子。

 (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> 

Answer 8

对于想知道如何禁用JavaScript Google Map API的人来说，

如果您点击地图一次，它将启用缩放滚动。 并在您的鼠标退出div后禁用 。

这里是一些例子

 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> 

Answer 9

你只需要添加地图选项：

 scrollwheel: false 

Answer 10

只要incase任何人有兴趣在这个纯粹的CSS解决scheme。 以下代码覆盖地图上的透明div，并在单击时将透明div移到地图后面。 覆盖图可以防止缩放，一旦点击，在地图后面，缩放function就会启用。

看到我的博客文章谷歌地图切换缩放与CSS的一个解释它是如何工作的，和笔codepen.io/daveybrown/pen/yVryMr工作演示。

免责声明：这主要是为了学习，可能不会是生产网站的最佳解决scheme。

HTML：

 <div class="map-wrap small-11 medium-8 small-centered columns"> <input id="map-input" type="checkbox" /> <label class="map-overlay" for="map-input" class="label" onclick=""></label> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe> </div> 

CSS：

 .map-wrap { position: relative; overflow: hidden; height: 180px; margin-bottom: 10px; } #map-input { opacity: 0; } .map-overlay { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; overflow: hidden; z-index: 2; } #map-input[type=checkbox]:checked ~ iframe { z-index: 3; } #map-input[type=checkbox]:checked ~ .map-overlay { position: fixed; top: 0; left: 0; width: 100% !important; height: 100% !important; } iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 1; border: none; } 

Answer 11

简单的解决scheme：

 // DISABLE MOUSE SCROLL IN MAPS // enable the pointer events only on click; $('.gmap-wrapper').on('click', function () { $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click }); // you want to disable pointer events when the mouse leave the canvas area; $(".gmap-wrapper").mouseleave(function () { $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area }); 

 .scrolloff{ pointer-events: none; } 

 <html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="gmap-wrapper"> <iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </html> 

Answer 12

使用这段代码，这将给你所有的谷歌地图的颜色和缩放控制。 （ scaleControl：false和scrollwheel：false将防止鼠标滚轮放大或缩小）

 function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 23.684994, lng: 90.356331}, zoom: 8, scaleControl: false, scrollwheel: false, styles: [ {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]}, {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]}, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: 'F5DAA6'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: 'F5DAA6'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: 'F5DAA6'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#f77c2b3'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#0676b6'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); var marker = new google.maps.Marker({ position: {lat: 23.684994, lng: 90.356331}, map: map, title: 'BANGLADESH' }); } 

Answer 13

我这样做简单的考试

jQuery的

 $('.map').click(function(){ $(this).find('iframe').addClass('clicked') }).mouseleave(function(){ $(this).find('iframe').removeClass('clicked') }); 

CSS

 .map { width: 100%; } .map iframe { width: 100%; display: block; pointer-events: none; position: relative; /* IE needs a position other than static */ } .map iframe.clicked { pointer-events: auto; } 

或者使用gmap选项

 function init() { var mapOptions = { scrollwheel: false, 

Answer 14

截至目前（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' }); 

gestureHandling的可用值是：

• 'greedy' ：当用户滑动（拖动）屏幕时，地图总是平移（向上或向下，向左或向右）。 换句话说，单指滑动和双指滑动都会导致地图平移。
• 'cooperative' ：用户必须用一根手指滑动页面和两个手指来平移地图。 如果用户用一根手指滑动地图，则在地图上出现覆盖图，提示用户使用两根手指移动地图。 在桌面应用程序中，用户可以通过按下修改键（ctrl或⌘键）的同时滚动来缩放或平移地图。
• 'none' ：此选项可禁用移动设备在地图上的平移和捏合，以及在桌面设备上拖动地图。
• 'auto' （默认值）：根据页面是否可滚动，Google Maps JavaScript API将gestureHandling属性设置为'cooperative'或'greedy'

简而言之，您可以轻松地将设置强制为“始终可缩放”（ 'greedy' ），“永不缩放”（ 'none' ）或“用户必须按CRTL /⌘启用缩放”（ 'cooperative' ）。