防止 Google Maps iframe 捕获鼠标的滚轮行为 [英] Prevent a Google Maps iframe from capturing the mouse's scrolling wheel behavior

问题描述

如果您使用触控板或鼠标使用嵌入式地图 iframe 进行浏览，您可能会陷入地图的缩放功能中，这真的很烦人.

If you're browsing with an embedded maps iframe using your trackpad or mouse, you can potentially trap yourself into the Maps' zooming capabilities, which is really annoying.

在此处尝试:https://developers.google.com/maps/documentation/embed/guide#概览

有没有办法防止这种情况发生?

Is there a way to prevent this?

推荐答案

这里已经回答了 => 在嵌入式 Google 地图上禁用鼠标滚轮缩放 by Bogdan.它的作用是它会禁用鼠标，直到您单击地图并且鼠标再次开始工作，如果您将鼠标从地图上移出，鼠标将再次被禁用.

This has been answered here => Disable mouse scroll wheel zoom on embedded Google Maps by Bogdan. What it does is that it will disable the mouse until you click onto the map and the mouse start working again, if you move the mouse out from the map the mouse will be disabled again.

注意:不适用于 IE <11(在 IE 11 上工作正常)

Note: Does not work on IE < 11 (Working fine on IE 11)

CSS:

<style>
    .scrolloff {
        pointer-events: none;
    }
</style>

脚本:

<script>
    $(document).ready(function () {

        // you want to enable the pointer events only on click;

        $('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
        $('#canvas1').on('click', function () {
            $('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
        });

        // you want to disable pointer events when the mouse leave the canvas area;

        $("#map_canvas1").mouseleave(function () {
            $('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
        });
    });
</script>

HTML: (只需要在 css 和 script 中输入正确的 id)

HTML: (just need to put correct id as defined in css and script)

<section id="canvas1" class="map">
     <iframe id="map_canvas1" src="https://www.google.com/maps/embe...." width="1170" height="400" frameborder="0" style="border: 0"></iframe>
</section>

这篇关于防止 Google Maps iframe 捕获鼠标的滚轮行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！