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

Question

我正在使用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
};

- aaronrussell

---

嗨，我创建了一个更完善的插件，可以通过一个漂亮的按钮来锁定或解锁地图。它也是jQuery插件。你可以在https://github.com/diazemiliano/googlemaps-scrollprevent上查看它。希望你会喜欢。 - Emiliano Díaz

在2016年12月7日的视频《开发者书写未来》中，由Stack Overflow的CEO兼联合创始人Joel Spolsky介绍，从17分09秒到18分25秒的内容。 - Peter Mortensen

Answer 1

在 Maps API 的第三个版本中，您可以在 MapOptions 属性内简单地将 scrollwheel 选项设置为 false：

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

如果您正在使用地图API的2版本，则需要使用以下disableScrollWheelZoom() API调用：

map.disableScrollWheelZoom();

在地图API的第3版中，默认启用了scrollwheel缩放功能，但在第2版中，除非使用enableScrollWheelZoom() API调用显式启用，否则该功能将被禁用。

- Daniel Vassallo

---

+1 FYI：disableDefaultUI: true可以替代navigationControl: false, mapTypeControl: false, scaleControl: false。 - Jordan Arsenault

一个需要注意的地方是，如果你没有设置mapTypeId，那么其他参数将被忽略。 - Michael Hunter

这对我来说可行，但它有一个奇怪的副作用，在页面上的模态中禁用了滚轮。模态内容中没有地图，光标也不在地图上方。 - regularmike

遗憾的是，这种方法在StreetViewPanorama地图上并没有按预期工作，因为将scrollwheel: false放入其中会禁用滚动缩放，但也会禁用页面滚动，因为它仍然在某种程度上捕捉滚动。 - Solomon Closson

Daniel，你能帮我回答这个问题吗？https://stackoverflow.com/questions/60544486/google-map-infowindow-is-not-looping-from-php-database-in-laravel-project - user12773215

Answer 2

Daniel的代码完成了任务（非常感谢！）。但我想要完全禁用缩放。我发现我必须使用这四个选项才能做到：

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

请参考：MapOptions对象规范

- Simon East

---

这个对你还管用吗？我一直无法让当前版本的v3（我相信是3.9）忽略滚轮，并不得不循环遍历地图对象的所有子元素并停止传播到地图中。 - c.apolzon

没问题，对我有用，谢谢！另外，如果你想移除所有默认地图控件小部件，只需将disableDefaultUI:true即可，无需逐个关闭缩放、旋转和平移控件。 - thomax

注意大小写；scrollwheel需要全部小写（我被大写的W搞混了）。 - kez

我只需要 "scrollwheel: false"。 - mindore

Answer 3

如果您希望以动态方式执行此操作;

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

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

有时候你需要在地图上展示一些“复杂”的东西（或者地图只是布局的一个小部分），但是这种滚动缩放会妨碍到展示。但是，一旦你有了干净的地图，这种缩放方式还是很好的。

- Felipe Pereira

---

你可以在初始化时添加以下代码： map.addListener('click', function() { if(map) map.setOptions({ scrollwheel: true }); });map.addListener('mouseout', function() { if(map) map.setOptions({ scrollwheel: false }); }); 这段代码的作用是当用户在地图上点击时，启用滚轮缩放功能（scrollwheel），并在鼠标移开后禁用该功能。 - Spaceman

这对我很有用，因为我想在谷歌地图代码之外的地方（即在我的jQuery代码内部）询问地图滚轮功能。 - lharby

Answer 4

保持简单！使用原始的Google地图变量，不要添加额外的内容。

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

}

- Creatif_IV

Answer 5

截至目前（2017年10月），谷歌已经实现了一个特定的属性来处理缩放/滚动，称为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'）。

- Kar.ma

Answer 6

我创建了一个更加完善的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>

- Emiliano Díaz

---

不错的插件，但在使用JS API创建谷歌地图而非使用iframe时，该如何使用它呢？ - ikkez

“Edit in JSFiddle Result JavaScript HTML CSS” 真的是代码的一部分吗？ - Peter Mortensen

Answer 7

如果你正在使用 GMaps.js 库，它可以使Geocoding和自定义标记等操作变得更加简单，下面是使用前面回答中学到的技术来解决此问题的方法。

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

Answer 8

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

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

- andilabs

Answer 9

您只需要在地图选项中添加：

scrollwheel: false

- Kiran Kanzar

Answer 10

如果有人想知道如何禁用Javascript Google地图API

这将使您在单击地图一次后启用缩放滚动条。并在鼠标退出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>

- AlbertSamuel