防止Google Maps iframe捕获鼠标's滚轮行为
Prevent a Google Maps iframe from capturing the mouse's scrolling wheel behavior
如果您使用触控板或鼠标浏览嵌入的地图iframe,您可能会陷入地图的缩放功能,这真的很烦人。
试试:https://developers.google.com/maps/documentation/embed/guide#overview
有办法防止这种情况吗?
这已经在这里回答了=>禁用鼠标滚轮缩放嵌入谷歌地图由Bogdan。它的作用是,它会禁用鼠标,直到你点击地图,鼠标重新开始工作,如果你把鼠标移出地图,鼠标将再次禁用。
注意:不工作在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的例子
是,可以通过scrollwheel: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
};
源是否可以在嵌入式谷歌地图上禁用鼠标滚轮缩放?
这是一个很好的答案。在我的情况下,它需要用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');
});
我创建了一个非常简单的jQuery插件来解决这个问题。这个插件会自动用一个透明的div和一个解锁按钮包装地图,所以你必须长按它们来激活导航。在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 Maps API禁用鼠标滚轮缩放
你可以直接禁用滚轮功能
options = $.extend({scrollwheel:假的,navigationControl:假的,mapTypeControl:假的,scaleControl:假的,拖拽:假的,mapTypeId: google.maps.MapTypeId.ROADMAP},选项);
我的网站里有很多地图,所以我把@Ronaldinho Learn Coding的答案修改成一个更通用的。
$( 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 Maps API v3缩放地图
- 使用Google Maps API向标记添加多个字符
- Google Maps API OverlayView()在AngularJS指令中不起作用
- 使用Google Maps API驱动时间多边形
- 使用Google Maps JavaScript API v3和Geocoding API映射多个位置
- 在for循环中使用多维数组设置google.maps.Marker图标
- 可扩展的画布作为Google Maps Javascript API中的覆盖
- 在自动完成中使用Google Maps Places API;API不工作
- google.maps.event.addDomListener(window, 'load', fun
- 根据PHP中数组的长度在Google Maps API中循环遍历标记
- 加载Google MAPS API v3的JSON数据
- 如何使用Dojo引用Google Maps事件中的包含类
- Javascript:Google Maps API:如果地图加载在隐藏容器中,则为空白地图
- 如何在Ionic/Codova应用程序中保护我的Google Maps Javascript V3 API密钥
- 来自JSON数组的Google Maps API生成器
- URL http://maps.google.com/maps?saddr=Start&daddr=end 继续
- Google Maps/Google Places:getPlace 和 getDetails 方法之间有区别吗?
- 如何在像maps.google.com这样的标记上右键添加基本方向
- 谷歌地图:放大/缩小与平移到特定点,如maps.google.com上下文菜单
- maps.google 地理编码 Jquery 调用与国家/地区代码