Google Maps API;禁止地图平移以启用页面滚动
我有一个移动网页,客户可以通过表单提交或当前位置弹出窗口输入他们的邮政编码,然后找到附近的中心。响应包括这些中心的列表以及显示其位置的谷歌地图插页和指示列表中指示的中心的引脚。
问题是地图占用了页面上的大量空间。很难向下滚动到地图下方的列表。
我想在Google地图上停用平移功能,以便人们可以触摸地图并在页面上下滚动。但是,我不想完全抑制地图上的所有触摸事件,因为我仍然希望人们能够点击引脚并查看与这些标记一起出现的弹出信息框。 Hense为什么我认为静态图像实现可能不是可行的方法。
这是该页面的链接:
http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php
我还是相对较新的Google API,所以我确定我需要自定义一些选项或事件监听器,而我似乎还没有在文档中找到它。
任何帮助或链接将不胜感激。
function setMap(map) {
if ( typeof googleMap != 'undefined' && !changeFlag ) return;
var current = new google.maps.LatLng( f.current.latitude,
f.current.longitude );
var dragFlag = false;
var start = 0, end = 0, windowPos = 0;
zoom = zoom == 0 ? bestZoom() : zoom;
map.html('');
var mapArgs = {
zoom : zoom,
center : current,
mapTypeId : google.maps.MapTypeId.ROADMAP,
backgroundColor : '#FFFFFF',
mapTypeControl : false,
};
if ( !config.panning ) mapArgs['draggable'] = false;
googleMap = new google.maps.Map(map.get(0), mapArgs);
new google.maps.Marker({
position : current,
map : googleMap,
title : 'You Are Here',
icon : 'youarehere.png'
});
movement = 0;
if ( !config.panning && events == 'touch' ) {
map.get(0).addEventListener('touchstart', function(e){
dragFlag = true;
start = events == 'touch' ? e.touches[0].pageY : e.clientY;
},true);
map.get(0).addEventListener('touchend', function(){
dragFlag = false;
}, true);
map.get(0).addEventListener('touchmove',function(e){
if ( !dragFlag ) return;
end = events == 'touch' ? e.touches[0].pageY : e.clientY;
window.scrollBy( 0,( start - end ) );
}, true);
}
for( var i in f.locations ) {
var location = new google.maps.LatLng( f.locations[i].latitude,
f.locations[i].longitude );
var args = {
position : location,
map : googleMap,
};
var marker = new google.maps.Marker(args);
var infoBox = config.infoBox;
var msg = config.infoBox;
for( var x in propertyList ) {
var myExp = new RegExp('{{'+propertyList[x]+'}}');
if( myExp.test(msg) && typeof(f.locations[i][propertyList[x]]) != 'undefined' && f.locations[i][propertyList[x]] != "" )
msg = msg.split('{{'+propertyList[x]+'}}').join(f.locations[i][propertyList[x]]);
else if( myExp.test(msg) )
msg = msg.split('{{'+propertyList[x]+'}}').join('');
}
setMessage(marker,msg);
}
}
function setMessage(marker, msg) {
var infoWindow = new google.maps.InfoWindow({ content : msg });
google.maps.event.addListener(marker,'click',function(){
if ( openBoxes.length > 0 )
openBoxes.pop().close();
infoWindow.open(googleMap,marker);
openBoxes.push( infoWindow );
});
}
更新:我发现如果我设置draggable:false它会阻止地图平移。现在我可以弄清楚当我触摸并拖动地图时如何让页面滚动我会很高兴。
更新:知道了!我将触摸事件附加到谷歌地图容器“地图”,这是有效的!
更新:实际上,我仍然不足。它在我的桌面上工作很好,但不在我的iPhone上。它让我可以向上和向下滚动,但我似乎无法点击任何标记。在我的桌面上,它很棒。页面上下滚动,我可以点击我的图标。我注意到我的标记图标上的点击事件似乎没有被触发。有些事情要阻止它。
没有找到相关结果
已邀请:
2 个回复
响摔衅幸
师埠女
在选项中