在嵌入式Google地图上停用鼠标滚轮缩放功能

2018-06-29 04:48:51

我正在开发一个WordPress网站，作者通常在大多数帖子中使用iFrame嵌入Google地图。

有没有一种方法来禁用所有使用Javascript的鼠标滚轮缩放？

我遇到了同样的问题：滚动页面时，指针变为覆盖地图，开始放大/缩小地图，而不是继续滚动页面。 :(

所以我解决了这个问题：在每个gmap iframe插入之前，将一个.overlay正好放在一个div上，请参阅：

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

在我的CSS中，我创建了这个类：

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

该div将覆盖地图，防止指针事件到达它。但是如果你点击div，它对指针事件变得透明，再次激活地图！

我希望得到你的帮助:)

我在这个讨论中尝试了第一个答案，无论我做了什么，它都不适合我，所以我想出了自己的解决方案：

用一个类包装iframe（在本例中为.maps）并理想地嵌入响应代码：http://embedresponsively.com/ - 将iframe的CSS更改为pointer-events: none ，然后将jQuery的click函数用于父元素可以将iframes css更改为pointer-events:auto

HTML

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>

CSS

.maps iframe{
    pointer-events: none;
}

jQuery的

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

我敢肯定，只有JavaScript才能做到这一点，如果有人想增加这种感觉的话。

重新激活指针事件的JavaScript方法非常简单。只需将Id添加到iFrame（即“iframe”），然后将onclick事件应用于cointainer div：

onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"

<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
   <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

我扩展了@nathanielperales解决方案。

行为描述如下：

单击地图以启用滚动

当鼠标离开地图时，禁用滚动

在javascript代码下面：

// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
  var that = $(this);

  that.on('click', onMapClickHandler);
  that.off('mouseleave', onMapMouseleaveHandler);
  that.find('iframe').css("pointer-events", "none");
}

var onMapClickHandler = function (event) {
  var that = $(this);

  // Disable the click handler until the user leaves the map area
  that.off('click', onMapClickHandler);

  // Enable scrolling zoom
  that.find('iframe').css("pointer-events", "auto");

  // Handle the mouse leave event
  that.on('mouseleave', onMapMouseleaveHandler);
}

// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);

这是一个jsFiddle的例子。

链接地址: http://www.djcxy.com/p/81521.html

上一篇: Disable mouse scroll wheel zoom on embedded Google Maps

下一篇: Google Maps API v3 won't disable scroll wheel after map loads