我有一個移動網頁,客戶可以通過表單提交或當前位置彈出框輸入其郵政編碼,然後找到附近的中心。回覆包括這些中心的列表,以及谷歌地圖插入顯示其位置和引腳指示列表中指出的中心。Google Maps API;禁止地圖平移以啓用頁面滾動
問題是地圖佔用了大量的頁面上的房地產。很難向下滾動到地圖下方的列表。
我想停用Google地圖上的平移功能,以便人們可以觸摸地圖並上下滾動頁面。但是,我不想完全禁止地圖上的所有觸摸事件,因爲我仍然希望人們能夠點擊引腳並查看與這些標記一起出現的彈出信息框。 Hense爲什麼我認爲靜態圖像實現可能不是最佳選擇。
下面是該頁面的鏈接:
http://cs.sandbox.millennialmedia.com/~tkirchner/sites/K/kumon/zip_page.php
我仍然相對較新的谷歌API,所以我敢肯定有一些選項或事件偵聽器,我需要定製,我可以」 t似乎還沒有在文檔中找到它。
任何幫助或鏈接,將不勝感激。
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,它會阻止地圖平移。現在我可以想出如何在地圖上拖動地圖時滾動頁面,我很樂意去做。
更新:明白了!我將觸摸事件附加到Google地圖容器「地圖」,並且工作正常!
更新:其實我仍然不足。它在我的桌面上工作正常,但不在我的iPhone上。它可以讓我上下滾動,但我似乎無法點擊任何標記。在我的桌面上,它的效果很好。頁面上下滾動,我可以點擊我的圖標。我注意到我的標記圖標上的點擊事件似乎沒有被解僱。有些事情必須阻止它。
是否http://stackoverflow.com/questions/5501144/google-maps-marker-not-working-on-iphone幫助你點擊標記問題? – Quog 2011-04-13 08:04:13
不是。我試圖在另一個項目上更改一次圖標,並且自定義圖標不會出現在我的iPhone上。所以我不得不切換回默認標記。它不像它那麼小,我無法準確點擊它。它只是我實際點擊屏幕的區域與標記實際位置完全不同。 – 2011-04-15 15:42:07