在新的 Google 地图引擎上禁用缩放

Question

我正在尝试禁用此页面的滚动/放大和缩小功能：

http://s1magazine.co.uk/NSA/pages/services/

每次滚动过去它都会放大，我该如何禁用它？

<h2>NSA is a national competition happening throughout England.</h2>
<h2><!-- Responsive iFrame -->
<!-- Responsive iFrame --></h2>
<div class="Flexible-container"><iframe src="http://mapsengine.google.com/map/u/0/embed?    mid=zyaBPLJJ7er8.kdbvNz_CrEYk" height="350" width="425" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Answer 1

自定义谷歌地图的更好方法是直接使用谷歌地图 API。 对于特定情况，您可以在 地图选项 中将 滚轮 设置为 false 并禁用滚动/缩放

<style>
    html, body, #map-canvas {
       height: 100%;
       margin: 0px;
       padding: 0px
    }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false  
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>


<div id="map-canvas"></div>

Answer 2

如果您使用的是“Map iFrame”或“API”，我制作了一个插件来解决这个问题。可以在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>