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

时间:2015-04-15 19:57:29

标签: javascript jquery google-maps mobile

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

我想允许用户仅在点击+拖动而不是简单滚动时滚动地图,以便用户可以滚动出地图。

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

我知道使用Hammer Js处理Double Taps的两种方法。

一个是在地图上添加叠加层,并根据需要更改其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});

})