在嵌入式 Google 地图上禁用鼠标滚轮缩放 [英] Disable mouse scroll wheel zoom on embedded Google Maps
问题描述
我在一个 WordPress 网站上工作，该网站的作者通常在大多数帖子中使用 iFrame 嵌入 Google 地图.
I am working on a WordPress site where the authors usually embed Google Maps using iFrames in most posts.
有没有办法使用 Javascript 通过鼠标滚轮禁用缩放?
Is there a way to disable the zoom via mouse scroll wheel on all of them using Javascript?
推荐答案
我遇到了同样的问题:当滚动页面然后指针在地图上时，它开始放大/缩小地图而不是继续滚动页.:(
I was having the same problem: when scrolling the page then the pointer becomes over the map, it starts to zoom in/out the map instead of continuing scrolling the page. :(
所以我解决了这个问题，在每个 gmap iframe 插入之前放置了一个 div 和一个 .overlay，参见:
So I solved this putting a div with an .overlay exactly before each gmap iframe insertion, see:
<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 中，我创建了类:
In my CSS i created the class:
.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，它对指针事件变得透明，再次激活地图！
The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!
希望能帮到你 :)
这篇关于在嵌入式 Google 地图上禁用鼠标滚轮缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
