Jquery Mobile的頁面載入google map會有一個bug(如第一個Go map button),這一個bug會造成map只有顯示一小塊(如果螢幕大一點的裝置,就真的是很小一塊了)。
問題
會這樣的原因是jquery mobile在未載入的頁面會是display: none,所以在載入google map時就會有空間不夠大的問題,這邊有兩種解決方式提供給大家參考。
initialize() //這是載入地圖的functiongoogle map api參考:https://developers.google.com/maps/documentation/javascript/examples/map-simple
關閉轉場動畫
效果參考Go Map2 (no transition)的按鈕。
$('#Map2').on('click',function(){ $.mobile.changePage( "#map", { transition: "none", changeHash: true }); //把換頁的動畫設成none initialize(); });
延遲執行
效果參考Go Map3 (time out function)的按鈕。
var mytimeout; $('#delayMap').on('click',function(){ mytimeout = window.setTimeout(initialize, 500); //延遲載入地圖的時間 });JS Bin