Question

我在我的网站中添加了iframe ..无论何时滚动，地图都会放大并缩小..我试图通过将pointer-events设置为none来避免这种情况但这会删除地图上的所有操作，我无法导航!!

HTML：

<div class="map">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29618050.62001087!2d63.250335576086215!3d25.017620133523653!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1450871870014" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

的CSS：

.map iframe {pointer-events: none;}

Answer 1

一个想法就是在上面加上一个面具：

<div class="map">
    <iframe src="https://www.google.com/maps/embed?xxx"></iframe>
    <div class="mask"></div>
</div>

而css将是

.map .mask {
    width: 100%;
    height: 100%;
}

整张地图都是不可触及的。

但是如果你想在不启用缩放的情况下启用左/右导航，this stackoverflow answer可能会有帮助。

iframe放大并缩小鼠标滚动

1 个答案: