如何禁用鼠标滚轮缩放与谷歌地图API

我使用谷歌地图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
};

当前回答

你只需要添加地图选项:

scrollwheel: false

2017-06-29 13:54:35

其他回答

以防你想动态地做这个;

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

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

有时你必须在地图上显示一些“复杂”的东西(或者地图是布局的一小部分)，这种滚动缩放会出现在中间，但一旦你有了一个干净的地图，这种缩放方式就很好了。

2014-09-18 18:52:53

你只需要添加地图选项:

scrollwheel: false

2017-06-29 13:54:35

我用这个简单的例子来做

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,

2017-06-22 13:20:00

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

2015-10-20 17:48:26

保持简单!原来的谷歌映射变量，没有额外的东西。

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

}

2014-10-21 14:17:44

如何禁用鼠标滚轮缩放与谷歌地图API

推荐文章

最新文章

标签