阻止Google Maps iframe捕获鼠标的滚动轮行为

Question

如果您使用触控板或鼠标浏览嵌入式地图iframe,您可能会陷入地图的缩放功能,这实在令人讨厌.

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

有办法防止这种情况吗？

Answer 1

这已在这里得到解答=> 在 Bogdan的嵌入式谷歌地图上禁用鼠标滚轮放大.它的作用是禁用鼠标,直到你点击地图并且鼠标再次开始工作,如果你将鼠标从地图上移开,鼠标将再次被禁用.

注意:不适用于IE <11(在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和脚本中定义正确的id)

<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>

Answer 2

我正在重新编辑#nathanielperales编写的代码,它真的对我有用.简单易捕,但只工作一次.所以我在JavaScript上添加了mouseleave().改编自#Bogdan的想法现在它完美无缺.试试这个.积分归#nathanielperales和#Bogdan所有.我只是结合了两个想法.感谢你们.我希望这也能帮助别人......

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"); 
});

即兴 - 适应 - 克服

这是一个jsFiddle示例.

Answer 3

是的,可以通过scrollwheel:false.

var mapOptions = {
   center: new google.maps.LatLng(gps_x, gps_y),
   zoom: 16,//set this value to how much detail you want in the view
   disableDefaultUI: false,//set to true to disable all map controls,
   scrollwheel: false//set to true to enable mouse scrolling while inside the map area
 };

资源