Question

所以，显然当我使用时：

<iframe style="pointer-events:none;" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

平移也会被禁用。

当我使用时：

<iframe style="scrollwheel: false" src="SOME GOOGLE MAPS LINK" width="100%" height="500" frameborder="0" ></iframe>

它只是不起作用。

是否只能禁用iframe中的滚动缩放？

Answer 1

无法仅在Google Maps iframe API上停用滚动功能，但有一种解决方法。

正如您已经注意到style="pointer-events:none;"确实阻止了iframe接收任何鼠标事件，并且在叠加层上使用了Javascript事件处理程序的组合，您可以在您想要的时候禁用并启用鼠标事件接收

您甚至可以收听mousemove()并仅在鼠标位于特定区域（例如按钮）时释放指针事件

我在quick demo上发了github，希望得到这个帮助。

Answer 2

对于想知道如何禁用 Javascript Google Map API

的人

从@kaho想法

采用

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part

.big-placeholder {
  background-color: #1da261;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>

Answer 3

他是一篇很好的博文，介绍了如何通过onClick="style.pointerEvents='none'" Disable the mouse scroll wheel zoom on embedded Google Map iframes来实现这一目标

Answer 4

这是示例

<script>
  function initMap() 
 {   
  var map = new google.maps.Map(document.getElementById('map'),    
  {center: {lat: -34.397, lng: 150.644},     
  scrollwheel: false,    
  zoom: 8
  });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer>      
</script>

来源： - https://developers.google.com/maps/documentation/javascript/?csw=1#GMap2.Methods

禁用在Google地图iframe中滚动缩放

4 个答案: