禁用鼠标滚轮缩放嵌入谷歌地图

小开

在做了一些调查之后，你有两个选择。由于新的地图api与iframe嵌入似乎不支持禁用鼠标滚轮。

第一个将使用旧的谷歌映射(https://support.google.com/maps/answer/3045828?hl=en)。

第二个将创建一个javascript函数来简化每个注释和使用参数的地图嵌入(它的示例代码仅指向位置，不显示精确的解决方案)

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 */
}

小开

我也遇到了同样的问题:当滚动页面时，指针会停在地图上，它会开始放大/缩小地图，而不是继续滚动页面。：(

所以我解决了这个问题，在每个gmap iframe插入之前放入div和.overlay，参见:

<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创建类:

.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，它对指针事件变得透明，再次激活地图!

我希望能帮助到你:)

小开

是的，很简单。我也遇到过类似的问题。只需将css属性“pointer-events”添加到iframe div中，并将其设置为“没有”。

< p > < >强的例子:& lt; Iframe style="pointer-events:none" src= ........> < /强> < / p >

SideNote:此修复将禁用地图上的所有其他鼠标事件。这对我来说很有效，因为我们在地图上不需要任何用户交互。

小开

var mapOptions = {
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

小开

这是我的方法。

把它放到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>

显然，您还需要调用谷歌Maps API。我简单地创建了一个名为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文件时，一定要给它传递sensor 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();

小开

我在讨论中尝试了第一个答案，但无论我怎么做，它都不适合我，所以我想出了自己的解决方案:

用类(。http://embedresponsively.com/ -将iframe的CSS更改为pointer-events: none，然后使用jQuery的单击函数到父元素，您可以将iframes CSS更改为pointer-events:auto

超文本标记语言

<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方法非常简单。只需要给iFrame一个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解决方案。

下面的行为描述:

单击地图以启用滚动
当鼠标离开地图时，禁用滚动

下面是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的例子。

小开

有一个很棒的简单的解决方案。

你需要在你的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中创建了一个例子，希望对您有所帮助!

小开

我自己偶然发现了这个问题，并在这个问题上使用了两个非常有用的答案: czerasz的答案和马萨的答案

它们都有很多道理，但在我的测试中，我发现其中一个不能用于移动设备，对IE的支持也很差(只能在IE11上运行)。这是nathanielperales的解决方案，然后由czerasz扩展，它依赖于指针事件css，在移动设备上不起作用(移动设备中没有指针)和它开不了任何非v11版本的IE。通常情况下，我不会太在意，但是有很多用户，我们想要一致的功能，所以我选择了覆盖解决方案，使用包装器来简化代码编写。

所以，我的标记是这样的:

<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要点中添加了我测试的解决方案，如果你想从那里得到东西…

小开

使用来自@nathanielperales的答案，我添加了悬停功能，因为对我来说，当用户失去对地图的关注时，它会更好地停止滚动:)

$(function(){
$('.mapa').hover(function(){
stopScroll();},
function () {
$('.mapa iframe').css("pointer-events", "none");
});
});


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

小开

添加样式pointer-events:none;这个工作正常

<iframe style="pointer-events:none;" src=""></iframe>

小开

我已经创建了一个非常简单的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>

小开

如果你有一个iframe使用谷歌映射嵌入API，像这样:

 <iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

你可以添加这个CSS样式:pointer-event:none; ES . < / p >

<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

小开

我正在重新编辑由#nathanielperales编写的代码，它真的为我工作。简单，容易捕捉，但它只工作一次。所以我在JavaScript上添加了mouseleave()。想法改编自#Bogdan，现在完美了。试试这个。感谢#nathanielperales和#Bogdan。我只是把两个想法结合起来。谢谢大家。我希望这也能帮助到其他人…

超文本标记语言

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

小开

主题的变体:使用jQuery的简单解决方案，不需要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。

希望对别人有用。

小开

这里有一个简单的解决办法。只需将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');
});
})

小开

最简单的方法是使用像: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>

然后，我们所需要做的就是使包装器相对于我们将创建的伪元素，以防止滚动

.map_wraper{
position:relative;
}

在此之后，我们将创建一个伪元素，它将定位在地图上，以防止滚动:

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

小开

这是一个解决方案与CSS和Javascript(即。Jquery，但也适用于纯Javascript)。同时，地图是响应式的。避免在滚动时缩放地图，但地图可以通过点击激活。

HTML / Javascript JQuery

<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 */
}

玩得开心!

小开

要禁用嵌入式谷歌地图上的鼠标滚轮缩放，你只需要设置iframe的css属性pointer-events为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>

小开

这是我的简单解决方案。

例如，把你的iframe放在一个名为“maps”的div类中。

这将是iframe的CSS

.maps iframe { pointer-events: none }

这里有一个小javascript，当你悬停div元素至少1秒时，将iframe的指针事件属性设置为“auto”(对我来说最好-设置为任何你喜欢的)，并在鼠标离开元素时再次清除超时/将其设置为“none”。

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

欢呼。

小开

在谷歌地图v3中，您现在可以禁用滚动缩放，这将带来更好的用户体验。其他地图功能仍然可以工作，你不需要额外的divs。我还认为应该为用户提供一些反馈，这样他们就可以看到何时启用了滚动，所以我添加了一个地图边框。

// 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')
});
};

小开

对我来说，最好的解决方案就是这样简单地使用:

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>

RESULT

注意事项:

最好的方法是在鼠标滚轮被禁用时，添加一个带有文本的较暗透明度的覆盖:"点击浏览" 但是当它是激活时(在你点击它之后)，那么带有文本的透明度将会消失，用户可以像预期的那样浏览地图。有什么线索吗?< / p >

小开

下面是我对@chams提出的@nathanielperales的回答的看法，现在我又提出了这个问题。

超文本标记语言

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

小开

我只是在developers.google.com上注册了一个帐户，并获得了一个调用Maps API的令牌，然后像这样禁用它(滚动轮: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
});
}

小开

这将给你一个响应谷歌地图，将停止iframe上的滚动，但一旦点击将让你缩放。

复制并粘贴到您的html，但替换iframe链接与您自己的。他在一篇文章中给出了一个例子:禁用鼠标滚轮缩放嵌入谷歌地图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>

小开

这就是我的方法。我发现它很容易在各种网站上实现，并且一直在使用它

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()" > < / p >

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>

希望这对寻找简单解决方案的人有所帮助。

小开

这是我对这个问题的解决方案，我正在构建一个WP网站，所以这里有一点php代码。但是键是映射对象中的scrollwheel: false,。

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

希望这对你有所帮助。欢呼声< / p >

小开

这个小小的免费插件可以做到——https://mapcraftpro.com/