如何禁用鼠标滚轮缩放与谷歌地图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
};

当前回答

在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调用显式启用。

2010-02-24 22:50:33

其他回答

你只需要添加地图选项:

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

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

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

参见:MapOptions对象规范

2011-06-27 23:18:31

一个简单的解决方案:

// 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

2017-06-08 18:56:31

我创建了一个更发达的jQuery插件，允许你用一个漂亮的按钮锁定或解锁地图。

这个插件禁用了谷歌地图iframe透明覆盖div，并添加了一个按钮解锁。你必须按650毫秒才能解锁。

您可以根据自己的方便更改所有选项。请登录https://github.com/diazemiliano/googlemaps-scrollprevent查看。

这里有一些例子。

2016-08-01 22:42:17

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

推荐文章

最新文章

标签