Question

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

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

有没有办法阻止这种情况？

Answer 1

这里已经回答=＆gt;波格丹Disable mouse scroll wheel zoom on embedded Google Maps。它的作用是它会禁用鼠标，直到你点击地图并且鼠标再次开始工作，如果你将鼠标从地图上移开，鼠标将再次被禁用。

注意：不适用于IE＆lt; 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 example.

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

source

Answer 4

Is it possible to disable mouse scroll wheel zoom on embedded Google Maps?

这是非常好的答案。在我的情况下，它需要用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');
});

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>

Answer 6

取自

How to disable mouse scroll wheel scaling with Google Maps API

您只需禁用滚轮功能

即可

options = $ .extend（{ scrollwheel：false， navigationControl：false， mapTypeControl：false， scaleControl：false， draggable：false， mapTypeId：google.maps.MapTypeId.ROADMAP }，options）;

Answer 7

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

Answer 8

您可以使用css禁用它。

iframe {
pointer-events: none;
}

Answer 9

你可以设置滚轮：假; 在标记或标记的css属性中，当放大时禁用从Google地图滚动缩小的。

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

9 个答案: