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

Question

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

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

有什么想法吗？

Answer 1

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

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

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

方法一演示注意。调整地图的 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});

})