如何使用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
};

Answer 1

在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调用.

Answer 2

丹尼尔的代码完成了这项工作(感谢一堆!).但我想完全禁用缩放.我发现我必须使用所有这四个选项才能这样做:

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

请参阅:MapOptions对象规范

Answer 3

以防你想动态地这样做;

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

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

有时你必须在地图上显示一些"复杂"的东西(或者地图是布局的一小部分),这个滚动缩放位于中间,但是一旦你有一个干净的地图,这种缩放方式就很好了.

Answer 4

把事情简单化!原始谷歌地图变量,没有额外的东西.

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

}

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').

Answer 6

我创建了一个更加开发的jQuery插件,允许您使用一个漂亮的按钮锁定或解锁地图.

此插件会禁用带有透明叠加div的Google Maps iframe,并为unlockit添加一个按钮.您必须按下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 7

在我的情况下,关键的是'scrollwheel':false在init中设置.注意:我正在使用jQuery UI Map.下面是我的CoffeeScript init函数标题:

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

Answer 8

为了以防万一,您正在使用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 9

您只需要添加地图选项：

scrollwheel: false