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

当前回答

Daniel的代码完成了这项工作(非常感谢!)。但我想完全禁用缩放。我发现我必须使用这四个选项来做到这一点:

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

参见:MapOptions对象规范

其他回答

在Maps API的版本3中,你可以在MapOptions属性中简单地将scrollwheel选项设置为false:

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

如果你正在使用版本2的地图API,你将不得不使用disableScrollWheelZoom() API调用如下:

map.disableScrollWheelZoom();

在Maps API的版本3中,滚动轮缩放默认是启用的,但在版本2中,它是禁用的,除非通过enableScrollWheelZoom() API调用显式启用。

以防你想动态地做这个;

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

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

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

在我的例子中,关键的事情是在'scrollwheel'中设置:在init中为false。注意:我使用的是jQuery UI Map。下面是我的CoffeeScript初始化函数标题:

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

对于想知道如何禁用Javascript谷歌地图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>

我用这个简单的例子来做

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,