// 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);
Second 将创建一个javascript函数，以简化为每个注释嵌入 Map 并使用参数（它的示例代码仅指向位置未显示精确解决方案）
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 */
}
7
有一个很棒的简单解决方案 .
您需要在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
});
});
function scrollOn() {
$('#map').removeClass('scrolloff'); // set the pointer events true on click
}
function scrollOff() {
$('#map').addClass('scrolloff'); // set the pointer events true on click
}
// 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
});
他们都有很多事实，但在我的测试中，我发现一个人没有在移动设备上工作（移动设备中没有指针）和it doesn't work on任何不是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);
// 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')
});
};
<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>
31
将其添加到您的脚本：
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
});
}
0
这是我的方法 .
将其弹出到我的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');
然后只需在您希望 Map 显示在页面上的地方插入一个空div .
<div id="map"></div>
您显然也需要调用Google Maps API . 我只是创建了一个名为mapi.js的文件并将其扔到my / js文件夹中 . 需要在上面的javascript之前调用此文件 .
// 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'));
});
30 回答
我遇到了同样的问题：当滚动页面然后指针变成 Map 时，它开始放大/缩小 Map 而不是继续滚动页面 . :(
所以我解决了这个问题，在每个gmap
iframe插入之前放了一个带有.overlay的.overlay，请参阅：在我的CSS中我创建了这个类：
div将覆盖 Map ，防止指针事件进入 . 但是如果你单击div，它对指针事件变得透明，再次激活 Map ！
我希望得到你的帮助:)
我在这次讨论中尝试了第一个答案，无论我做了什么，它都不适合我，所以我提出了自己的解决方案：
用一个类（本例中为.maps）包装iframe，理想情况下嵌入代码：http://embedresponsively.com/ - 将iframe的CSS更改为
pointer-events: none，然后使用jQuery的click元素将父元素更改为iframes css为pointer-events:autoHTML
CSS
jQuery的
我确信只有JavaScript才能做到这一点，如果有人想要添加到这个感觉上 .
重新激活指针事件的JavaScript方法非常简单 . 只需给iFrame（即“iframe”）提供一个Id，然后将onclick事件应用于该币体div：
我扩展了@nathanielperales解决方案 .
在行为描述下面：
单击 Map 以启用滚动
当鼠标离开 Map 时，禁用滚动
在javascript代码下面：
和here is an jsFiddle example .
我正在重新编辑#nathanielperales编写的代码，它真的对我有用 . 简单易捕，但只工作一次 . 所以我在JavaScript上添加了mouseleave（） . 改编自#Bogdan的想法现在它完美无缺 . 试试这个 . 积分归#nathanielperales和#Bogdan所有 . 我只是结合了两个想法 . 感谢你们 . 我希望这也能帮助别人......
HTML
CSS
jQuery的
即兴 - 适应 - 克服
这是一个jsFiddle example.
是的，很容易 . 我遇到了类似的问题 . 只需将css属性 "pointer-events" 添加到iframe div并将其设置为 'none' .
Example:< iframe style="pointer-events:none" src= ........ >
SideNote：此修复程序将禁用 Map 上的所有其他鼠标事件 . 它对我有用，因为我们不需要在 Map 上进行任何用户交互 .
做了一些研究后，你有2个选择 . 由于嵌入了iframe的新 Map api似乎不支持禁用鼠标滚轮 .
First 将使用旧的谷歌 Map （https://support.google.com/maps/answer/3045828?hl=en） .
Second 将创建一个javascript函数，以简化为每个注释嵌入 Map 并使用参数（它的示例代码仅指向位置未显示精确解决方案）
有一个很棒的简单解决方案 .
您需要在css中添加一个自定义类，用于设置指针事件以将canvas映射为none：
然后，使用jQuery，您可以根据不同的事件添加和删除该类，例如：
我在jsfiddle中创建了一个例子，希望有所帮助！
我只是在developers.google.com上注册了一个帐户，并获得了一个用于调用Maps API的令牌，并且只是禁用它（滚动：false）：
这是我的方法 . 我发现很容易在各种网站上实现并一直使用它
CSS和JavaScript：
在HTML中，您需要将iframe包装在div中 .
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >希望这有助于任何寻找简单解决方案的人 .
这是一个简单的解决方案 . 只需将
pointer-events: noneCSS设置为<iframe>即可禁用鼠标滚动 .如果要在用户单击 Map 时激活鼠标滚动，请使用以下JS代码 . 当鼠标移出 Map 时，它还将再次禁用鼠标滚动 .
要在嵌入式Google Map 上禁用鼠标滚轮缩放，您只需将iframe的css属性指针事件设置为无：
多数民众赞成......非常整洁吧？
嗯，对我来说，最好的解决方案是简单地使用这样：
HTML：
CSS：
JS：
RESULT
注意事项：
最好的方法是添加一个带有深色透明度和文本的叠加层：当 mouse wheel is deactivated 时点击浏览“但是当它是 activated （点击它之后）后，带文字的透明度将消失，用户可以按预期浏览 Map . 任何线索怎么做？
添加样式
pointer-events:none;这个工作正常这是我的问题的解决方案，我正在构建一个WP站点，所以这里有一些PHP代码 . 但关键是 Map 对象中的
scrollwheel: false,.希望这会有所帮助 . 干杯
最简单的方法是使用像
:before或:after这样的伪元素 .此方法不需要任何其他html元素或jquery .
如果我们有这个html结构：
然后我们需要做的就是使包装器相对于我们将创建的伪元素来阻止滚动
在此之后，我们将创建将在 Map 上定位的伪元素，以防止滚动：
而你已经完成了，没有jquery没有额外的HTML元素！这是一个有效的jsfiddle示例：http://jsfiddle.net/e6j4Lbe1/
这是我的简单解决方案 .
例如，将iframe放在div中，并使用名为“maps”的类 .
这将是您的iframe的CSS
这里有一个小的javascript，当你将div元素悬停至少1秒时，将iframe的pointer-events属性设置为“auto”（最适合我 - 将它设置为你喜欢的任何东西）并清除超时/当鼠标离开元素时，再次将其设置为“none” .
干杯 .
我创建了一个非常简单的jQuery插件来解决这个问题 . 检查https://diazemiliano.github.io/googlemaps-scrollprevent
使用来自@nathanielperales的回答我已经添加了悬停功能，因为当用户失去对 Map 的注意力再次停止滚动时，它会更好用:)
主题的变化：使用jQuery的简单解决方案，无需编辑CSS .
悬停侦听器附加到父元素，因此如果当前父元素较大，则只需在第3行之前用if包装iframe即可 .
希望它对某些人有用 .
我自己偶然发现了这个问题，并在这个问题上使用了两个非常有用的答案的混搭：czerasz的回答和_1426317的回答 .
他们都有很多事实，但在我的测试中，我发现一个人没有在移动设备上工作（移动设备中没有指针）和it doesn't work on任何不是v11的IE版本 . 通常我不会在意，但是有很多用户，我们需要一致的功能，所以我选择了覆盖解决方案，使用包装器使代码更容易 .
所以，我的标记看起来像这样：
然后样式是这样的：
最后剧本：
我还在GitHub gist中添加了我的测试解决方案，如果你想从那里得到东西......
这是一个使用CSS和Javascript的解决方案（即Jquery，但也适用于纯Javascript） . 同时 Map 也是响应式的 . 滚动时避免使用 Map 进行缩放，但可以通过单击来激活 Map .
HTML / JQuery Javascript
CSS
玩得开心 ！
在Google Maps v3中，您现在可以禁用滚动缩放功能，从而获得更好的用户体验 . 其他 Map 功能仍然有效，您不需要额外的div . 我还认为应该为用户提供一些反馈，以便他们可以看到何时启用滚动，因此我添加了 Map 边框 .
这将为您提供一个响应式Google Map ，它将停止在iframe上滚动，但一旦点击就会让您缩放 .
将其复制并粘贴到您的HTML中，但用您自己的iframe链接替换 . 他的一篇文章就是一个例子：Disable the mouse scroll wheel zoom on embedded Google Map iframes
将其添加到您的脚本：
这是我的方法 .
将其弹出到我的main.js或类似文件中：
然后只需在您希望 Map 显示在页面上的地方插入一个空div .
<div id="map"></div>您显然也需要调用Google Maps API . 我只是创建了一个名为mapi.js的文件并将其扔到my / js文件夹中 . 需要在上面的javascript之前调用此文件 .
当您调用mapi.js文件时，请确保传递传感器false属性 .
即：
<script type="text/javascript" src="js/mapi.js?sensor=false"></script>API的新版本3由于某种原因需要包含传感器 . 确保在main.js文件之前包含mapi.js文件 .
对于谷歌 Map v2 - GMap2：
如果您使用Google Map 嵌入式API的iframe如下：
你可以添加这个css样式：pointer-event：none; ES .
这是我对@nathanielperales答案延伸的看法@chams，现在再次由我扩展 .
HTML
jQuery
The simplest one ：