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

560

我正在使用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
};
jquery  google-maps  google-maps-api-3  jquery-plugins 
— Aaronrussell
source
1
嗨，我创建了一个更加完善的插件，该插件可让您使用一个漂亮的按钮来锁定或解锁地图。也是jQuery插件。您可以在github.com/diazemiliano/googlemaps-scrollprevent上进行检查，希望您喜欢。
— EmilianoDíaz'16
由Stack Overflow首席执行官兼联合创始人Joel Spolsky撰写的《开发未来》中的精选文章，发表时间：17分09秒-18分25秒（2016-12-07）。
— 彼得·莫滕森

Answers:

986

在Maps API的第3版中，您只需scrollwheel在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();

该scrollwheel变焦默认情况下，在地图API第3版启用，但在第2版，除非与明确启用已禁用enableScrollWheelZoom()的API调用。

— 丹尼尔·瓦萨洛（Daniel Vassallo）
source
40
+1 FYI：disableDefaultUI: true可以取代navigationControl: false, mapTypeControl: false, scaleControl: false
— 乔丹·阿塞诺
1
对我来说，一个陷阱是，如果您没有mapTypeId，其他参数将被忽略。
— Michael Hunter
这对我有用，但是有一个奇怪的副作用，就是在页面的模式中禁用滚轮。模态内容中没有地图，并且光标不在地图上。
— Regularmike 2015年
遗憾的是，这与StreetViewPanorama Map不能按预期工作，因为将滚轮放入：false，禁用滚动缩放，但由于仍以某种方式捕获滚动，因此也禁用了滚动页面。
— 所罗门·克洛森
丹尼尔，你可以帮我回答这个问题 stackoverflow.com/questions/60544486/...
— 泽维尔伊萨克
103

Daniel的代码可以完成这项工作（感谢堆！）。但是我想完全禁用缩放。我发现必须使用所有这四个选项：

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

请参阅：MapOptions对象规范

— 西蒙·伊斯特
source
2
这仍然对您有用吗？我一直无法获得v3的当前版本（我相信它的3.9）来忽略滚轮，而不得不求助于遍历map对象的所有子对象并停止传播到map中。
— c.apolzon
是的，为我工作，谢谢！另外，如果要删除所有默认的地图控件小部件，只需执行disableDefaultUI：true即可，而不要分别关闭缩放，旋转和平移控件。
— thomax
33
当心大写；scrollwheel需要全部使用小写字母（只是因为加了W而使我失望）
— Kez
1
— 滚轮
30

万一您想动态地执行此操作；

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

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

有时，您必须在地图上显示一些“复杂”的内容（或者地图仅是布局的一小部分），并且滚动缩放位于中间，但是一旦您有了干净的地图，这种缩放方式就很好了。

— 费利佩·佩雷拉（Felipe Pereira）
source
3
您可以在初始化时添加以下代码：map.addListener（'click'，function（）{if（map）map.setOptions（{scrollwheel：true}）;}）; map.addListener（'mouseout'，function（）{if（map）map.setOptions（{scrollwheel：false}）;}）;
— 太空人2015年
这对我有用，因为我想在google maps代码之外询问map滚轮功能。即从我自己的jQuery代码内部。
— lharby
26

把事情简单化！原始的Google maps变量，没有多余的东西。

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

}
— Creatif_IV
source
10

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

手势处理的可用值为：

  • 'greedy'：当用户滑动（拖动）屏幕时，地图始终会平移（向上或向下，向左或向右）。换句话说，单指滑动和两指滑动都会导致地图平移。
  • 'cooperative'：用户必须用一根手指滑动才能滚动页面，用两根手指滑动才能平移地图。如果用户用一根手指轻扫地图，则地图上会出现一个叠加层，提示用户用两根手指移动地图。在桌面应用程序上，用户可以在按下修饰键（Ctrl或⌘键）的同时滚动滚动来缩放或平移地图。
  • 'none'：此选项将禁用移动设备在地图上的平移和缩放以及在桌面设备上的地图拖动。
  • 'auto'（默认值）：根据页面是否可滚动，Google Maps JavaScript API会将手手势属性设置为'cooperative'或'greedy'

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

— 卡玛
source
7

我创建了一个更发达的jQuery插件，该插件可让您使用一个漂亮的按钮锁定或解锁地图。

该插件通过透明的div禁用了Google Maps iframe，并添加了用于解锁的按钮。您必须按下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>
展开摘要

— 埃米利亚诺·迪亚兹（EmilianoDíaz）
source
不错的插件，但是当您使用JS API而不是iframe创建google map时如何使用它？
— ikkez 2016年
2
是“ Edit in JSFiddle Result JavaScript HTML CSS”真正的代码的一部分吗？
— 彼得·莫滕森
6

就我而言，关键是要设置'scrollwheel':falseinit。注意：我正在使用jQuery UI Map。下面是我的CoffeeScript初始化函数标题：

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
— Andilabs
source
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 });
}
— racl101
source
4

对于想知道如何禁用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>
展开摘要

— 阿尔伯特·塞缪尔
source
3

一个简单的解决方案：

// 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>
展开摘要

资料来源：https : //github.com/Corsidia/scrolloff

— 达美
source
2

以防万一有人对纯CSS解决方案感兴趣。以下代码将透明div覆盖在地图上，并在单击透明div并将其移动到地图后。叠加层可防止缩放，一旦单击，便会在地图后面启用缩放。

请参阅我的博客文章Google Maps CSS切换缩放以了解其工作原理，以及输入笔codepen.io/daveybrown/pen/yVryMr进行演示。

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

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;
}
— 戴维
source
0

使用该段代码，即可为您提供Google地图的所有颜色和缩放控件。（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'
            });
          }
展开摘要

— 夏蒙·罗伊（Chamon Roy）
source
尽管此代码可以回答问题，但提供有关如何和/或为什么解决问题的其他上下文将提高​​答案的长期价值。请阅读此操作指南以提供优质的答案。
— thewaywere是
0

我用这个简单的例子

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,
— 分光镜
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.