谷歌地图劫持了iphone's滚动(触摸事件）-如何恢复

google maps hijacked iphone's scrolling (touch events) - how to bring back?

本文关键字：事件 触摸 恢复 何恢复 滚动 iphone 劫持 谷歌地图      更新时间：2023-09-26

我使用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;
}

正如你所看到的，这个想法是用户可以在不再空闲时立即使用地图功能。事实上，空转是在滚动后开始的，这就像触摸设备的魅力一样。

希望这能有所帮助。

相关文章：