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

Posted

技术标签:

【中文标题】在 gmap 上移动鼠标滚轮时避免放大/缩小【英文标题】:Avoid zooming in/out when moving mouse wheel on a gmap 【发布时间】:2011-09-28 18:47:27 【问题描述】:

我有一个页面,其中心显示了一张大地图。正如您可能知道(并且讨厌)每当您在地图上旋转鼠标滚轮时,它会放大/缩小。

有没有办法禁用此效果?与地图的所有其他交互都可以,我只需禁用它即可。

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

【问题讨论】:

How to disable mouse scroll-wheel scaling with Google Maps API的可能重复 【参考方案1】:

看看这些页面:

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 解决方案在 *** 上;)

How to disable mouse scroll wheel scaling with Google Maps API

【讨论】:

这是 API 的第 2 版【参考方案2】:

我创建了一个更完善的 jQuery 插件,它允许您使用一个漂亮的按钮来锁定或解锁地图。因为在某些情况下,用户导航地图更有用。 此插件使用透明覆盖 div 禁用谷歌地图 iframe,并添加一个解锁按钮。您必须按住 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"
    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>

【讨论】:

以上是关于在 gmap 上移动鼠标滚轮时避免放大/缩小的主要内容,如果未能解决你的问题,请参考以下文章

使用 ctrl+鼠标滚轮 flex3 在高级数据网格中放大/缩小

C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框

word滚动鼠标滑轮会放大缩小怎么办

openGL按鼠标中键实现放大缩小

使用带有变换原点中心的滚轮在鼠标点上放大/缩小图像。在计算中需要帮助 [已解决]

为啥我的鼠标滚动时会莫名其妙的变成放大缩小页面了?该怎么办?