7

我使用 JQuery。我使用谷歌地图 api v3。

现在，在我的 iPhone 上，如果我将手指放在地图的区域上，我就无法向下滚动页面。

draggable : false在地图的选项中不起作用。它只是阻止地图在内部移动。

找到了这些类似的问题，但无法从中得到答案：

如何禁用谷歌地图移动布局上的滚动？

在页面上嵌入谷歌地图而不覆盖 iPhone 滚动行为

谷歌地图 API；抑制地图平移以启用页面滚动

有什么简单的方法可以做到这一点？看起来谷歌是故意这样做的！（显然不是）

编辑#1：
我不能使用静态地图。

4

2 回答 2

7

<div>在地图上放一个透明的<div>应该可以解决问题。

或者，如果您不想要任何类型的交互性，只需使用静态地图 API 。（它更轻量级，因为你嵌入的只是一张图片。）

于 2012-09-13T01:13:10.103 回答
1

josh3736 的回答对我有帮助，谢谢。我想用我的解决方案扩展它：

我做的第一件事是添加了一个#overlay div，就像 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-Snipet：

#map-overlay {
    display: none;
    position: absolute;
    z-index: 500;
}

.idle #map-overlay {
    display: block;
}

如您所见，这个想法是用户一旦不再空闲就可以使用地图功能。并且由于事实上，在滚动后空闲开始，它就像触摸设备的魅力一样。

希望这可以帮助。

于 2014-04-14T10:49:42.747 回答