我正在使用Google Maps API(v3)在页面上绘制一些 Map . 我想做的一件事是在 Map 上滚动鼠标滚轮时禁用缩放,但我不确定如何 .
我已禁用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
};
14 回答
在我的情况下,关键的是在init中设置
'scrollwheel':false
. 注意:我正在使用jQuery UI Map . 下面是我的CoffeeScript init函数 Headers :只是因为有人对这个纯css解决方案感兴趣 . 以下代码在 Map 上覆盖透明div,并在单击时将透明div移动到 Map 后面 . 叠加可防止缩放,一旦单击,并在 Map 后面,即可启用缩放 .
有关其工作原理的说明,请参阅我的博客文章Google maps toggle zoom with css,并查看工作演示的笔codepen.io/daveybrown/pen/yVryMr .
免责声明:这主要用于学习,可能不是 生产环境 网站的最佳解决方案 .
HTML:
CSS:
您只需添加 Map 选项:
以防万一,您正在使用GMaps.js库,这使得执行地理编码和自定义引脚等操作变得更加简单,以下是使用从先前答案中学习的技术解决此问题的方法 .
使用那段代码,它将为您提供谷歌 Map 的所有颜色和缩放控制 . ( scaleControl: false 和 scrollwheel: false 将阻止鼠标滚轮向上或向下缩放)
我用这个简单的例子做到了
jQuery
CSS
Or use the gmap options
在Maps API的第3版中,您只需在MapOptions属性中将
scrollwheel
选项设置为false:如果您使用的是Maps API的第2版,则必须使用disableScrollWheelZoom() API调用,如下所示:
默认情况下,在Maps API的版本3中启用了
scrollwheel
缩放,但在版本2中,除非使用enableScrollWheelZoom()
API调用明确启用,否则它将被禁用 .对于想知道如何禁用 Javascript Google Map API 的人
如果您单击一次 Map ,它将 enable 缩放滚动 . 并且 disable 在鼠标退出div之后 .
Here is some example
我创建了一个更加开发的jQuery插件,允许您使用一个漂亮的按钮锁定或解锁 Map .
此插件会禁用带有透明叠加div的Google Maps iframe,并为unlockit添加一个按钮 . 您必须按下650毫秒才能解锁它 .
您可以更改所有选项以方便使用 . 在https://github.com/diazemiliano/googlemaps-scrollprevent查看
Here's some example.
简单的解决方案:
资料来源:https://github.com/Corsidia/scrolloff
Daniel's code完成工作(感谢一堆!) . 但我想完全禁用缩放 . 我发现我必须使用所有这四个选项才能这样做:
见:MapOptions object specification
把事情简单化!原始谷歌 Map 变量,没有额外的东西 .
以防你想动态地这样做;
有时你必须在 Map 上显示一些“复杂”的东西(或者 Map 是布局的一小部分),这个滚动缩放位于中间,但是一旦你有了一个干净的 Map ,这种缩放方式就很好了 .
截至目前(2017年10月),Google已经实现了一个特定属性来处理缩放/滚动,称为
gestureHandling
. 其目的是处理移动设备操作,但它也会修改桌面浏览器的行为 . 这是official documentation:简而言之,您可以轻松地将设置强制设置为"always zoomable"(
'greedy'
),"never zoomable"('none'
)或"user must press CRTL/⌘ to enable zoom"('cooperative'
) .