防止Google Maps iframe捕获鼠标的滚动行为
如果您使用触控板或鼠标浏览embedded式地图iframe，则可能会陷入地图缩放function，这实在令人烦恼。
试试这里： https ： //developers.google.com/maps/documentation/embed/guide#overview
有没有办法来防止这一点？
这已经在这里得到了解答=>停止在Bogdan embedded的谷歌地图上的鼠标滚轮缩放 。 它的function是禁用鼠标，直到你点击地图，鼠标再次开始工作，如果你从地图上移动鼠标，鼠标将被禁用。
注意 ：不适用于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：（只需要把正确的id放在CSS和脚本中定义）
<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>
我正在重新编辑#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的例子。
是的，它可以通过滚轮：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 };
资源
是否可以在embedded的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'); });
我已经创build了一个非常简单的jQuery插件来解决这个问题。 这个插件用一个透明的div和一个解锁button自动地包装地图，所以你必须长按它们来激活导航。 在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>
取自
如何使用Google地图API禁用鼠标滚轮缩放
您可以禁用滚轮function
options = $ .extend（{scrollwheel：false，navigationControl：false，mapTypeControl：false，scaleControl：false，draggable：false，mapTypeId：google.maps.MapTypeId.ROADMAP}，options）;
我在我的网站有很多地图，所以我修改@罗纳尔迪尼奥学习编码答案更广泛的一个。
$( 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'); }); });
你可以用css禁用它。
iframe { pointer-events: none; }
你可以设置滚动轮：假; 在标记或标记的css属性中，以便在放大和缩小时禁止从Google地图滚动。
