javascript - 在触摸设备上滚动的全屏谷歌地图

Question

我有一个带有谷歌地图的联系人页面。当用户向下滚动时， map 将在移动设备上全屏显示。

我希望允许用户仅通过单击+拖动而不是简单滚动来滚动 map ，以便用户可以滚动出 map 。

有什么想法吗？

Answer 1

我知道使用 Hammer Js 处理双击的两种方法。

一是在 map 上添加叠加层并根据需要更改其z-index值。叠加层的好处是，如果需要，不需要额外的代码来禁用 map 上的任何交互，例如标记单击和控件。

二是使用内置Gmaps .setOptions({draggable: true/false} 函数。

方法一演示 注意。调整 map 的 CSS 宽度、高度和位置

http://jsfiddle.net/gmqctmkd/

CSS

.overlay {
position:absolute;
height:300px;
width:100%;
background:transparent;
z-index:99;
top:0;
left:0;
}

代码

mc.on("doubbletap", function(ev) {

 $(".overlay").css("z-index", "1");

})

方法二演示使用.setOptions({draggable: true/false}

http://jsfiddle.net/oom5uevt/

代码

// set map Options to disable drag.

map.setOptions({draggable: false});

// enable drag 

mc.on("doubbletap", function(ev) {

map.setOptions({draggable: true});

})