Javascript 阻止Google Maps iframe捕获鼠标'；s的滚轮行为

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

请在此处尝试：

有什么方法可以防止这种情况吗？

从

您只需禁用滚轮功能即可

选项=$。扩展({ 滚轮：错误， 导航控制：错误， mapTypeControl:false， scaleControl:false， 可拖动：错误， mapTypeId:google.maps.mapTypeId.ROADMAP

---

}，选项）

是的，可以通过滚轮：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
 };

---

您可以使用css禁用它

iframe {
pointer-events: none;
}

这是普里蒂的好答案。 在我的例子中，需要用jquery修复它才能完美地工作。 我的代码是：

HTML

JQUERY

$('.overlay').click(function(){
$(this).removeClass('overlay');
});

---

博格丹在这里回答了这个问题。它所做的是，它将禁用鼠标，直到您单击地图，鼠标再次开始工作，如果您将鼠标从地图中移出，鼠标将再次禁用

注意：不适用于IE<11（适用于IE 11）

CSS:

.滚动{
指针事件：无；
}

脚本：

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

$（文档）.ready（函数（）{
//您希望仅在单击时启用指针事件；
$（'#map_canvas1'）.addClass（'scrolloff'）；//在doc ready上将指针事件设置为none
$（'#canvas1'）。在（'click'，函数（）{
$（'#map_canvas1'）。removeClass（'scrolloff'）；//单击时将指针事件设置为true
});
//当鼠标离开画布区域时，要禁用指针事件；
$（“#map_canvas1”）.mouseleave（函数（）{
$（'#map_canvas1'）.addClass（'scrolloff'）；//当鼠标离开映射区域时，将指针事件设置为无
});
});

HTML：（只需输入css和脚本中定义的正确id）

---

我的网站上有很多地图，所以我将@Ronaldinho Learn Coding的答案修改为一个更一般的答案

$( document ).ready(function() {
   $('.scroll-safe-map').addClass('scrolloff'); 
   $('.map-control-scroll').on('click', function() {
       $('.scroll-safe-map').removeClass('scrolloff');
   });
   $('.map-control-scroll').mouseleave(function() {
       $('.scroll-safe-map').addClass('scrolloff'); 
   });    
});

---

我创建了一个非常简单的jQuery插件来解决这个问题。 这个插件自动用一个透明的div和一个解锁按钮包装地图，所以你必须长按它们才能激活导航。 查一下

这里有一些例子。

（函数（）{
$（函数（）{
$（“#btn开始”）。单击（函数（）{
$（“iframe[src*='google.com/maps']）。滚动防止({
打印日志：对
}).start（）；
返回$（“#btn停止”）。单击（函数（）{
返回$（“iframe[src*='google.com/maps']）；
});
});
返回$（“#btn开始”）。触发（“单击”）；
});
}).打电话（这个）
在JSFiddle结果JavaScript HTML CSS.embed容器中编辑{
职位：相对！重要；
填充底部：56.25%！重要；
高度：0！重要；
溢出：隐藏！重要；
最大宽度：100%！重要；
}
.嵌入容器iframe{
位置：绝对！重要；
顶部：0！重要；
左：0！重要；
宽度：100%！重要；
身高：100%！重要；
}
.mapscroll wrap{
位置：静态！重要；
}


我正在重新编辑由#nathanielperales编写的代码，这对我来说真的很有效。简单易懂，但它只起一次作用。所以我在JavaScript上添加了mouseleave（）。这个想法改编自#Bogdan，现在是完美的。试试这个。纳撒尼尔佩雷莱斯和博格丹获得了荣誉。我只是把两个想法结合起来。谢谢你们。我希望这也能帮助其他人

HTML

jQuery

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});

即兴-适应-克服

这是一个你可以设置的
滚轮：假；
在标签或标签的css属性中，在放大和缩小时禁止从Google maps中滚动。
但是如何在iframe中指出这一点？您应该直接编辑地图。如果你因为某种原因不能，你可以使用（）我不想丢失任何东西，除了缩放/滚动，因为它的功能非常丰富。来自GMaps2的上述链接不起作用：（我看你是一个虽然客户：）你可以尝试一种javascript方法来禁用鼠标滚动，比如document.body.style.overflow=allowScroll？”：“hidden”；（）这个答案对嵌入的地图无效。但是我如何向iframe表明这一点？有人能对此给出更新吗？我们如何向iframe src指示“scrollwheel:false”？？！Plzz帮助…：（@user3513687看到我的答案了吗？）恐怕目前你只能做一件事：发送一个你也可以在它上面放一个div，位置绝对，z索引更高，背景透明。Joerddewit的建议是浏览器友好。如果你需要支持旧浏览器，唯一的问题是你失去了与浏览器的交互能力h地图。切换到API以更好地控制交互可能更好。该解决方案不适用于IE！！！还要注意，Imho指针事件禁用了此Iframe的所有单击事件。如果使用google maps版本3，我建议您改为这样做：它似乎是桌面设备的解决方案，但显然不支持mobile first design.with the this you loss+-zoom feature你能举个例子吗？滚轮这不仅仅是一个javascript属性吗？
<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>

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

$( document ).ready(function() {
   $('.scroll-safe-map').addClass('scrolloff'); 
   $('.map-control-scroll').on('click', function() {
       $('.scroll-safe-map').removeClass('scrolloff');
   });
   $('.map-control-scroll').mouseleave(function() {
       $('.scroll-safe-map').addClass('scrolloff'); 
   });    
});

<div class='embed-container maps'>
    <iframe width='600' height='450' frameborder='0' src='http://foo.com'>  </iframe>
</div>

.maps iframe{
    pointer-events: none;
}

$('.maps').click(function () {
    $('.maps iframe').css("pointer-events", "auto");
});

$( ".maps" ).mouseleave(function() {
  $('.maps iframe').css("pointer-events", "none"); 
});