在gmap上移动鼠标滚轮时避免放大/缩小

我有一个中心显示大地图的页面。正如你可能知道（并讨厌），只要你在地图上旋转你的鼠标滚轮，它就会放大/缩小。在gmap上移动鼠标滚轮时避免放大/缩小

有没有办法禁用这个效果？所有其他与地图的交互都没关系，我只需要禁用它。

我正在使用API的V3。欢迎使用jquery解决方案。

2011-07-05 Nicola Peluchetti

的可能的复制[如何禁用鼠标滚轮缩放与谷歌地图API（http://stackoverflow.com/questions/2330197/how-to-disable-mouse -scroll-wheel-scaling-with-google-maps-api） –

看一看这些页面：

http://googlemapsapi.blogspot.com/2007/04/v278-go-ahead-scroll-your-mouse-wheels.html

http://code.davidjanes.com/blog/2008/11/14/how-to-enabledisable-mouse-wheel-actions-on-your-map/

你正在寻找的功能是

map.disableScrollWheelZoom()

€DIT： V3解决方案是在Stackov上erflow;）

How to disable mouse scroll wheel scaling with Google Maps API

来源

2011-07-05 12:31:04

这是针对版本2的API –

已更新为v3 :) –

我创建了一个更发达的jQuery插件，它允许您锁定或解锁用一个漂亮的按钮，地图。因为在某些情况下，用户可以更方便地导航地图。这个插件禁用谷歌地图iframe与透明覆盖div和增加一个按钮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);

Edit in JSFiddle Result JavaScript HTML CSS .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>

来源

2016-08-01 22:54:29

在gmap上移动鼠标滚轮时避免放大/缩小

回答

相关问题