我使用JQuery。我使用谷歌地图api v3。
现在,在我的iPhone上,如果我把手指放在地图的区域,我就无法向下滚动页面。
地图选项中的draggable : false
不起作用。它只是阻止地图在其中移动。
发现了这些类似的问题,但无法从中得到答案:
如何禁用谷歌地图移动布局上的滚动?
在页面上嵌入谷歌地图而不覆盖iPhone滚动行为
谷歌地图API;抑制地图平移以启用页面滚动
有什么简单的方法吗?看起来谷歌是故意这么做的!(显然不是)
编辑#1:
我不能使用静态地图。
在地图的<div>
上放置一个透明的<div>
就可以了。
或者,如果您不需要任何类型的交互性,只需使用静态映射API。(因为你嵌入的只是一个图像,所以它要轻得多。)
josh3736的答案帮助了我,谢谢。我想用我的解决方案来扩展它:
我做的第一件事,我添加了一个#overlaydiv,就像josh3736提到的那样。
然后我实现了一个小jQuery脚本来检测用户是否在做什么或处于空闲模式:
// jQuery Idle
idleTimer = null;
idleState = false;
idleWait = 2000;
(function ($) {
$(document).ready(function () {
$('*').bind('mousemove keydown scroll', function () {
clearTimeout(idleTimer);
if (idleState == true) {
// Reactivated event
$('html').removeClass('idle');
$('html').addClass('no-idle');
}
idleState = false;
idleTimer = setTimeout(function () {
// Idle Event
$('html').addClass('idle');
$('html').removeClass('no-idle');
idleState = true; }, idleWait);
});
$("body").trigger("mousemove");
});
}) (jQuery)
正如您所看到的,该脚本正在向html添加类:idle和no idle。
之后,我添加了以下CSS代码段:
#map-overlay {
display: none;
position: absolute;
z-index: 500;
}
.idle #map-overlay {
display: block;
}
正如你所看到的,这个想法是用户可以在不再空闲时立即使用地图功能。事实上,空转是在滚动后开始的,这就像触摸设备的魅力一样。
希望这能有所帮助。