Question

我有一个页面，中间有一张大地图。您可能知道（并且讨厌）每当您在地图上旋转鼠标滚轮时，它都可以进行缩放。

有没有办法禁用这种效果？所有其他与地图的互动都没问题，我只需要禁用它。

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

Answer 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()

€二叔： V3解决方案在Stackoverflow上;）

How to disable mouse scroll wheel scaling with Google Maps API

Answer 2

我创建了一个更加开发的jQuery插件，允许您使用一个漂亮的按钮锁定或解锁地图。因为在某些情况下，用户可以更方便地导航地图。这个插件禁用谷歌地图iframe与透明叠加div和添加按钮解锁。您必须按650毫秒才能解锁。您可以为方便起见更改所有选项。请在https://github.com/diazemiliano/googlemaps-scrollprevent

处查看

以下是一些例子。

＆＃13;

(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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

2 个答案: