防止Google Maps iframe捕获鼠标滚轮行为

Question

如果你使用触摸板或鼠标浏览嵌入地图 iframe，你可能会被限制在地图的缩放功能中，这真的很烦人。

试试这里：https://developers.google.com/maps/documentation/embed/guide#overview 有没有一种方法可以防止这种情况发生？

- rebelliard

---

很抱歉，目前只有一件事可以做：发送一个“功能请求”（feature-request）。 - Dr.Molle

你也可以使用绝对定位的 div，设置更高的 z-index 和透明背景。 - Sjoerd de Wit

SjoerdDeWit的建议很适合浏览器。如果您需要支持旧版浏览器。唯一的问题是您会失去地图交互。最好切换到API以获得更多对交互的控制。 - Matt Wagner

Answer 1

这里已经有答案 => 如何禁用嵌入式Google地图上的鼠标滚轮缩放，答案由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>

- Ronaldinho Learn Coding

---

该解决方案不适用于IE<11，因为pointer-events不受支持。 - Katie Kilian

请注意，依我之见，pointer-events 禁用了该内嵌框架的所有点击事件。 - stephanfriedrich

如果使用 Google 地图版本 3，我建议您改用以下方法：https://dev59.com/gGEh5IYBdhLWcg3w0GOx#36193098 - Gerry

似乎这是一个针对桌面设备的解决方案，但显然不支持移动优先设计。 - Emiliano Díaz

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示例。

- cHaMs

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

源代码

- Tiago Duarte

---

我应该如何向 iframe 指示这一点？ - rebelliard

你应该直接编辑地图。如果由于某些原因你无法这样做，可以使用<iframe style="pointer-events:none">(https://dev59.com/gGEh5IYBdhLWcg3w0GOx)。 - Tiago Duarte

除了缩放/滚动功能外，我不想失去任何东西，因为它非常丰富多彩。来自GMaps2的上面链接无法使用。 :( - rebelliard

我看到您是一个棘手的客户 :) 您可以尝试使用JavaScript方法来禁用鼠标滚轮，例如document.body.style.overflow = allowScroll? "": "hidden";（https://dev59.com/HUzSa4cB1Zd3GeqPqukO） - Tiago Duarte

这个回答对于嵌入地图无效。 - Josef Sábl

那么，在 iframe 谷歌地图上，这将如何运作？ - MCSell

Answer 4

如何在嵌入的Google地图中禁用鼠标滚轮缩放？

这里有一个很好的答案。 在我的情况下，需要使用jquery来完美解决。 我的代码是：

HTML

<div class="overlay"></div>
<iframe src="#MAP_LINK#" width="1220" height="700" frameborder="0" style="border:0; margin-top: 20px;" ></iframe>

CSS

.overlay {
background:transparent; 
position:relative; 
width:1220px;
height:720px; /* your iframe height */
top:720px;  /* your iframe height */
margin-top:-720px;  /* your iframe height */
}

JQUERY

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

- Lesenus

Answer 5

我创建了一个非常简单的jQuery插件来解决这个问题。该插件会自动用透明的div和一个解锁按钮包装地图，所以您必须长按它们才能激活导航。请查看https://diazemiliano.github.io/googlemaps-scrollprevent/。

以下是一些示例。

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);

Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

- Emiliano Díaz

Answer 6

我的网站中有很多地图，所以我修改了@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'); 
   });    
});

- torresomar

Answer 7

摘自

如何使用Google Maps API禁用鼠标滚轮缩放

您可以禁用滚轮功能

选项=$.extend({ scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, draggable: false, mapTypeId: google.maps.MapTypeId.ROADMAP }, options);

- Alek Hurst

---

那我该如何指示一个 iframe 呢？ - rebelliard

有人可以更新一下吗？我们如何指定iframe的src中的“scrollwheel：false”？！ 求求您帮忙... :( - anusreemn

@user3513687请查看我的回答。 - Ronaldinho Learn Coding

Answer 8

你可以使用 CSS 将其禁用。

iframe {
pointer-events: none;
}

- Nabeel

---

你会失去缩放功能。 - Hernaldo Gonzalez

Answer 9

您可以在CSS属性的<body>标签或<div>标签中设置scroll-wheel: False;来禁用Google地图在缩放时的滚动。

- dhruv

---

你能给一个例子吗？ 滚轮不仅是JavaScript属性吗？ - stephanfriedrich