hol*_*ira 197 scrollwheel google-maps
我正在使用WordPress网站,作者通常在大多数帖子中使用iFrame嵌入Google地图.
有没有办法使用Javascript通过鼠标滚轮禁用所有这些缩放？
Mas*_*ssa 254
我遇到了同样的问题:当滚动页面然后指针变成地图时,它开始放大/缩小地图而不是继续滚动页面.:(
所以,我解决了这个把一个div带有.overlay完全相同每个GMAP之前iframe插入,请参阅:
<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,它对指针事件变得透明,再次激活地图!
我希望得到你的帮助:)
小智 134
我在这次讨论中尝试了第一个答案,无论我做了什么,它都不适合我,所以我提出了自己的解决方案:
用一个类(本例中为.maps)包装iframe,理想情况下嵌入代码: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方法非常简单.只需向iFrame(即"iframe")提供一个ID,然后将onclick事件应用于该铸币器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>
cze*_*asz 54
我扩展了@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);
cHa*_*aMs 31
我正在重新编辑#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示例.
Has*_*aja 24
是的,很容易.我遇到了类似的问题.只需将css属性"pointer-events"添加到iframe div并将其设置为"none"即可.
示例:<iframe style ="pointer-events:none"src = ........>
SideNote:此修复程序将禁用地图上的所有其他鼠标事件.它对我有用,因为我们不需要在地图上进行任何用户交互.
bor*_*hvm 19
var mapOptions = {
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Grz*_*orz 13
做了一些研究后,你有2个选择.由于嵌入了iframe的新地图api似乎不支持禁用鼠标滚轮.
首先是使用旧的谷歌地图(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 */
}
有一个很棒的简单解决方案.
您需要在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
});
});
我只是在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
});
}
小智 7
这是我的方法.我发现很容易在各种网站上实现并一直使用它
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>希望这有助于任何寻找简单解决方案的人.
这是一个简单的解决方案.只需将pointer-events: noneCSS 设置<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');
});
})
| 归档时间： |
|
| 查看次数： |
290612 次 |
| 最近记录： |