在embedded式Google地图上停用鼠标滚轮缩放
我正在开发一个WordPress网站，作者通常在大多数post中使用iFrameembeddedGoogle地图。
有没有一种方法来禁用所有使用Javascript的鼠标滚轮缩放？
我遇到了同样的问题：滚动页面时，指针变成了地图，它开始放大/缩小地图，而不是继续滚动页面。 🙁
所以我解决了这个把每个gmap iframe插入之前的一个.overlay准确的div ，请看：
<html> <div class="overlay" onClick="style.pointerEvents='none'"></div> <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe> </html>
在我的CSS中，我创build了这个类：
.overlay { background:transparent; position:relative; width:640px; height:480px; /* your iframe height */ top:480px; /* your iframe height */ margin-top:-480px; /* your iframe height */ }
div将覆盖地图，防止指针事件到达它。 但是如果你点击div，指针事件变得透明，再次激活地图！
我希望得到你的帮助:)
我在这个讨论中尝试了第一个答案，不pipe我做了什么，它都不适合我，所以我提出了自己的解决scheme：
用类（.maps在这个例子中）包装iframe，理想情况下，embedded对应的代码： http ://embedresponsively.com/ – 将iframe的CSS更改为pointer-events: none ，然后将jQuery的click函数用于父元素可以将iframes CSS更改为pointer-events:auto
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"); });
我敢肯定，如果有人想增加这种感觉，那么只有JavaScript才能做到这一点。
重新激活指针事件的JavaScript方法非常简单。 只要给Id框（即“iframe”），然后将一个onclick事件应用到cointainer div：
onclick="document.getElementById('iframe').style.pointerEvents= 'auto'" <div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"> <iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div>
我扩展了@nathanielperales解决scheme。
下面的行为描述：
- 单击地图启用滚动
- 当鼠标离开地图时，禁用滚动
下面的JavaScript代码：
// Disable scroll zooming and bind back the click event var onMapMouseleaveHandler = function (event) { var that = $(this); that.on('click', onMapClickHandler); that.off('mouseleave', onMapMouseleaveHandler); that.find('iframe').css("pointer-events", "none"); } var onMapClickHandler = function (event) { var that = $(this); // Disable the click handler until the user leaves the map area that.off('click', onMapClickHandler); // Enable scrolling zoom that.find('iframe').css("pointer-events", "auto"); // Handle the mouse leave event that.on('mouseleave', onMapMouseleaveHandler); } // Enable map zooming with mouse scroll when the user clicks the map $('.maps.embed-container').on('click', onMapClickHandler);
这里是一个jsFiddle的例子 。
我正在重新编辑#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的例子。
是的，它很容易。 我面临类似的问题。 只需将CSS属性“pointer-events”添加到iframe div并将其设置为“none”即可 。
例如：<iframe style =“pointer-events：none”src = ……..>
SideNote：此修补程序将禁用地图上的所有其他鼠标事件。 它为我工作，因为我们并不需要在地图上的任何用户交互。
var mapOptions = { scrollwheel: false, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
做了一些研究之后，你有两个select。 由于embeddediframe的新地图API似乎不支持鼠标轮的禁用。
首先会使用旧的Google地图（ https://support.google.com/maps/answer/3045828?hl=zh-CN ）。
其次，将创build一个JavaScript函数，以简化每个评论和使用参数的地图的embedded（这是示例代码只是指向位置不显示确切的解决scheme）
function createMap(containerid, parameters) { var mymap = document.getElementById(containerid), map_options = { zoom: 13, scrollwheel: false, /* rest of options */ }, map = new google.maps.Map(mymap, map_options); /* 'rest of code' to take parameters into account */ }
有一个真棒和简单的解决scheme。
你需要在你的css中添加一个自定义的类来设置指针事件来将canvas映射到none：
.scrolloff{ pointer-events: none; }
然后，使用jQuery，可以根据不同的事件添加和删除该类，例如：
$( document ).ready(function() { // you want to enable the pointer events only on click; $('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready $('#canvas').on('click', function() { $('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click }); // you want to disable pointer events when the mouse leave the canvas area; $( "#map_canvas" ).mouseleave(function() { $('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area }); });
我在jsfiddle中创build了一个例子，希望有所帮助！
我只需在developers.google.com上注册一个帐户，然后获取致电地图API的令牌，只需将其停用即可（scrollwheel：false）：
var map; function initMap() { map = new google.maps.Map(document.getElementById('container_google_maps'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, scrollwheel: false }); }
这是我的方法。 我发现很容易在各种网站上实施，并始终使用它
CSS和JavaScript：
<style type="text/css"> .scrolloff iframe { pointer-events: none ; } </style> <script type="text/javascript"> function scrollOn() { $('#map').removeClass('scrolloff'); // set the pointer events true on click } function scrollOff() { $('#map').addClass('scrolloff'); } </script>
在HTML中，您将需要将iframe包装在div中。 <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >
function scrollOn() { $('#map').removeClass('scrolloff'); // set the pointer events true on click } function scrollOff() { $('#map').addClass('scrolloff'); // set the pointer events true on click }
.scrolloff iframe { pointer-events: none ; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
这是一个简单的解决scheme。 只需将pointer-events: none CSS设置为<iframe>即可禁用鼠标滚动。
<div id="gmap-holder"> <iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none" src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe> </div>
如果您想在用户点击地图时激活鼠标滚动，请使用以下JS代码。 当鼠标移出地图时，它也会再次禁用鼠标滚动。
$(function() { $('#gmap-holder').click(function(e) { $(this).find('iframe').css('pointer-events', 'all'); }).mouseleave(function(e) { $(this).find('iframe').css('pointer-events', 'none'); }); })
要在embedded式Google地图上停用鼠标滚轮缩放function，只需将iframe的css属性指针事件设置为none：
<style> #googlemap iframe { pointer-events:none; } </style>
那是所有..漂亮整洁吧？
<div id="googlemap"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.6714814904954!2d90.40069809681577!3d23.865796688563787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c425897f1f09%3A0x2bdfa71343f07395!2sArcadia+Green+Point%2C+Rd+No.+16%2C+Dhaka+1230%2C+Bangladesh!5e0!3m2!1sen!2sin!4v1442184916780" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> </div>
那么，对我来说，最好的解决scheme就是像这样简单地使用：
HTML：
<div id="google-maps"> <iframe frameborder="0" height="450" src="***embed-map***" width="100"</iframe> </div>
CSS：
#google-maps iframe { pointer-events:none; }
JS：
<script> $(function() { $('#google-maps').click(function(e) { $(this).find('iframe').css('pointer-events', 'auto'); }).mouseleave(function(e) { $(this).find('iframe').css('pointer-events', 'none'); }); }) </script>
结果
注意事项：
最好的做法是用一个文本添加一个带有较深透明度的叠加层：当点击鼠标滚轮时，“ 点击浏览 ”但是当它被激活 （点击它之后）时，带有文本的透明度将消失 ，用户可以浏览地图如预期。 任何线索如何做到这一点？
添加样式pointer-events:none; 这工作正常
<iframe style="pointer-events:none;" src=""></iframe>
最简单的方法是使用伪元素:before或:after 。
这个方法不需要任何额外的HTML元素或jQuery。
如果我们有这样的html结构：
<div class="map_wraper"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div>
那么我们需要做的就是使包装相对于我们将要创build的伪元素来防止滚动
.map_wraper{ position:relative; }
在此之后，我们将创build将被定位在地图上的伪元素，以防止滚动：
.map_wraper:after{ background: none; content: " "; display: inline-block; font-size: 0; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
你完成了，没有jQuery没有额外的HTML元素！ 这里是一个工作jsfiddle的例子： http : //jsfiddle.net/e6j4Lbe1/
这是我简单的解决scheme。
例如，将您的iframe放在一个名为“maps”的类中。
这将是您的iframe的CSS
.maps iframe { pointer-events: none }
这里有一个小的javascript，当你将div元素至less停留1秒时，将iframe的pointer-events属性设置为“auto”（对我来说最好 – 把它设置成任何你喜欢的），并清除超时/鼠标离开元素时再次将其设置为“无”。
var maptimer; $(".maps").hover(function(){ maptimer = setTimeout(function(){ $(".maps").find("iframe").css("pointer-events", "auto"); },1000); },function(){ clearTimeout(maptimer); $(".maps").find("iframe").css("pointer-events", "none"); });
干杯。
我已经创build了一个非常简单的jQuery插件来解决这个问题。 在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>
使用来自@nathanielperales的答案我添加了hoverfunction，对我来说，它会更好地工作，当用户失去对地图的重点停止再次滚动:)
$(function(){ $('.mapa').hover(function(){ stopScroll();}, function () { $('.mapa iframe').css("pointer-events", "none"); }); }); function stopScroll(){ $('.mapa').click(function () { $('.mapa iframe').css("pointer-events", "auto"); }); }
主题的变化：jQuery的简单解决scheme，无需编辑CSS。
// make iframe active on click, disable on mouseleave $('iframe.google_map').each( function(i, iframe) { $(iframe).parent().hover( // make inactive on hover function() { $(iframe).css('pointer-events', 'none'); }).click( // activate on click function() { $(iframe).css('pointer-events', 'auto'); }).trigger('mouseover'); // make it inactive by default as well });
hover侦听器附加到父元素，所以如果当前父级更大，您可以简单地在第三行之前用一个div包装iframe。
希望这对别人有用。
我自己偶然发现了这个问题，并在这个问题上使用了两个非常有用的答案的混搭： czerasz的答案和massa的答案。
他们都有很多的事实，但是在我的testing中，我发现其中一个没有用于移动设备，而且IE浏览器的支持也很差（只适用于IE11）。 这是nathanielperales的解决scheme，然后由czerasz扩展，czerasz依赖于指针事件css，并且不能在移动设备上工作（在移动设备上没有指针）， 它不适用于任何不是v11版本的IE 。 通常我不会在意，但是有大量的用户在那里，我们想要一致的function，所以我使用覆盖解决scheme，使用包装，使代码更容易。
所以，我的标记看起来像这样：
<div class="map embed-container"> <div id="map-notice" style="display: block;"> {Tell your users what to do!} </div> <div class="map-overlay" style="display: block;"></div> <iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe> </div>
然后，样式是这样的：
.map.embed-container { position:relative; } .map.embed-container #map-notice{ position:absolute; right:0; top:0; background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/ background-color: rgba(0,0,0,.50); color: #ccc; padding: 8px; } .map.embed-container .map-overlay{ height:100%; width:100%; position:absolute; z-index:9999; background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/ }
最后脚本：
//using jquery... var onMapMouseleaveHandler = function (event) { $('#map-notice').fadeIn(500); var elemento = $$(this); elemento.on('click', onMapClickHandler); elemento.off('mouseleave', onMapMouseleaveHandler); $('.map-overlay').fadeIn(500); } var onMapClickHandler = function (event) { $('#map-notice').fadeOut(500); var elemento = $$(this); elemento.off('click', onMapClickHandler); $('.map-overlay').fadeOut(500); elemento.on('mouseleave', onMapMouseleaveHandler); } $('.map.embed-container').on('click', onMapClickHandler);
我也在GitHub的要点中添加了我的testing解决scheme，如果你喜欢从那里得到东西…
这是一个CSS和Javascript的解决scheme（即JQuery，但也适用于纯Javascript）。 同时地图是响应式的。 滚动时避免贴图缩放，但可以点击地图来激活地图。
HTML / JQuery Javascript
<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;"> <iframe id="googlemap" src="http://your-embed-url" height="350"></iframe> </div>
CSS
#map { position: relative; padding-bottom: 36%; /* 16:9 ratio for responsive */ height: 0; overflow: hidden; background:transparent; /* does the trick */ z-index:98; /* does the trick */ } #map iframe { pointer-events:none; /* does the trick */ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index:97; /* does the trick */ }
玩的开心 ！
在Google Maps v3中，您现在可以禁用滚动缩放function，从而带来更好的用户体验。 其他地图function仍然可以工作，你不需要额外的div。 我也认为应该有一些用户反馈，以便他们可以看到何时启用滚动，所以我添加了地图边框。
// map is the google maps object, '#map' is the jquery selector preventAccidentalZoom(map, '#map'); // Disables and enables scroll to zoom as appropriate. Also // gives the user a UI cue as to when scrolling is enabled. function preventAccidentalZoom(map, mapSelector){ var mapElement = $(mapSelector); // Disable the scroll wheel by default map.setOptions({ scrollwheel: false }) // Enable scroll to zoom when there is a mouse down on the map. // This allows for a click and drag to also enable the map mapElement.on('mousedown', function () { map.setOptions({ scrollwheel: true }); mapElement.css('border', '1px solid blue') }); // Disable scroll to zoom when the mouse leaves the map. mapElement.mouseleave(function () { map.setOptions({ scrollwheel: false }) mapElement.css('border', 'none') }); };
这将给你一个响应式的Google地图，将停止在iframe上滚动，但一旦点击将让你放大。
复制并粘贴到您的HTML，但replace您自己的iframe链接。 他举了一个例子： 在内嵌的Google Map iframe上禁用鼠标滚轮缩放
<style> .overlay { background:transparent; position:relative; width:100%; /* your iframe width */ height:480px; /* your iframe height */ top:480px; /* your iframe height */ margin-top:-480px; /* your iframe height */ } </style> <div class="overlay" onClick="style.pointerEvents='none'"></div> <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>
最简单的一个 ：
<div id="myIframe" style="width:640px; height:480px;"> <div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div> <iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe> </div>
将此添加到您的脚本中：
function initMap() { var uluru = {lat: -25.363, lng: 131.044}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: uluru, scrollwheel: false, disableDefaultUI: true, disableDoubleClickZoom: true }); var marker = new google.maps.Marker({ position: uluru, map: map }); }
这是我的方法。
popup这个到我的main.js或类似的文件中：
// Create an array of styles. var styles = [ { stylers: [ { saturation: -300 } ] },{ featureType: 'road', elementType: 'geometry', stylers: [ { hue: "#16a085" }, { visibility: 'simplified' } ] },{ featureType: 'road', elementType: 'labels', stylers: [ { visibility: 'off' } ] } ], // Lagitute and longitude for your location goes here lat = -7.79722, lng = 110.36880, // Create a new StyledMapType object, passing it the array of styles, // as well as the name to be displayed on the map type control. customMap = new google.maps.StyledMapType(styles, {name: 'Styled Map'}), // Create a map object, and include the MapTypeId to add // to the map type control. mapOptions = { zoom: 12, scrollwheel: false, center: new google.maps.LatLng( lat, lng ), mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP], } }, map = new google.maps.Map(document.getElementById('map'), mapOptions), myLatlng = new google.maps.LatLng( lat, lng ), marker = new google.maps.Marker({ position: myLatlng, map: map, icon: "images/marker.png" }); //Associate the styled map with the MapTypeId and set it to display. map.mapTypes.set('map_style', customMap); map.setMapTypeId('map_style');
然后，只需插入一个空的div在你想要的地图出现在你的网页上。
<div id="map"></div>
您显然还需要在Google Maps API中调用。 我只是简单地创build了一个名为mapi.js的文件，并把它扔到我的/ js文件夹中。 这个文件需要在上面的javascript之前调用。
`window.google = window.google || {}; google.maps = google.maps || {}; (function() { function getScript(src) { document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>'); } var modules = google.maps.modules = {}; google.maps.__gjsload__ = function(name, text) { modules[name] = text; }; google.maps.Load = function(apiLoad) { delete google.maps.Load; apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m@228000000"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h@228000000"],[["http://mt0.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t@131,r@228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t@131,r@228000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime); }; var loadScriptTime = (new Date).getTime(); getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js"); })();`
当你调用mapi.js文件时，一定要将传感器的false属性传递给它。
即： <script type="text/javascript" src="js/mapi.js?sensor=false"></script>
由于某种原因，API的新版本3需要包含传感器。 确保在main.js文件之前包含mapi.js文件。
对于谷歌地图V2 – GMap2：
ar map = new GMap2(document.getElementById("google_map")); map.disableScrollWheelZoom();
如果您有一个使用Google地图embedded式API的iframe，如下所示：
<iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
你可以添加这个CSS样式：pointer-event：none; ES。
<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
Here's my take on the @nathanielperales answer extended by @chams, now extended again by me.
HTML
<div class='embed-container maps'> <iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe> </div>
jQuery的
// we're doing so much with jQuery already, might as well set the initial state $('.maps iframe').css("pointer-events", "none"); // as a safety, allow pointer events on click $('.maps').click(function() { $(this).find('iframe').css("pointer-events", "auto"); }); $('.maps').mouseleave(function() { // set the default again on mouse out - disallow pointer events $(this).find('iframe').css("pointer-events", "none"); // unset the comparison data so it doesn't effect things when you enter again $(this).removeData('oldmousepos'); }); $('.maps').bind('mousemove', function(e){ $this = $(this); // check the current mouse X position $this.data('mousepos', e.pageX); // set the comparison data if it's null or undefined if ($this.data('oldmousepos') == null) { $this.data('oldmousepos', $this.data('mousepos')); } setTimeout(function(){ // some left/right movement - allow pointer events if ($this.data('oldmousepos') != $this.data('mousepos')) { $this.find('iframe').css("pointer-events", "auto"); } // set the compairison variable $this.data('oldmousepos', $this.data('mousepos')); }, 300); console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos')); });
Here is my solution for the problem, I was building a WP site, so there is a little php code here. But the key is scrollwheel: false, in the map object.
function initMap() { var uluru = {lat: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 18, scrollwheel: false, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); }
希望这会有所帮助。 干杯
