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

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()并仅在鼠标位于特定区域(例如按钮)时释放指针事件

我在github上做了一个快速演示,希望对你有所帮助.