2013-08-29 57 views
1

我在我的jquerymobile/phonegap項目中使用谷歌地圖API。目前,如果您轉到地圖「頁面」並更改縮放級別,拖動地圖等,然後離開並返回到它不保存其狀態的地圖頁面,它會重新加載地圖。我曾嘗試使用dom-cache <div data-role="page" id="map" data-dom-cache="true">,但這似乎沒有任何幫助。保持谷歌地圖在JqueryMobile頁面重新加載

如何保存地圖「狀態」並避免在導航離開和返回時重新加載?

請求的代碼

<div data-role="page" id="map" data-dom-cache="true"> 
     <div data-role="header" data-theme="e"> 
      <h1>HoneySpot</h1> 
     </div> 
     <div data-role="content" style="width:100%; height:100%; padding:0;"> 
      <div id="map_canvas" style="width:100%;height:100%"></div>     
     </div> 
     <div data-role="footer" data-theme="a" data-id="mainnav" data-position="fixed"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#top" data-icon="arrow-u" id="top">Top</a></li> 
        <li><a href="#add" data-icon="plus" id="add">Add</a></li> 
        <li><a href="#map" data-icon="search" id="search" class="ui-btn-active ui-state-persist">Search</a></li> 
        <li><a href="#feed" data-icon="bars" id="feed">Feed</a></li> 
        <li><a href="#profile" data-icon="gear" id="profile">Profile</a></li> 
       </ul> 
      </div> 
      <!-- /navbar --> 
     </div> 
    </div> 

JS

$(document).on('pageshow', '#map', function (event) { 
    max_height(); 
     navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':true,'timeout':20000}); 
}); 
function onSuccess(position) {  
    var minZoomLevel = 15; 
    var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: minZoomLevel, 
     center: myLatlng, 
     mapTypeControl: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
} 
+0

顯示一些代碼也許你在事件'pageshow'上創建你的地圖? – alkis

+0

謝謝你帶領我朝着正確的方向。我將它改爲'$(document).ready(function(event){'現在它工作的很好! – Brian

+0

沒問題。你可以自己貼出答案並接受它,所以你可以幫助其他人問題,當然也會增加你的業力點 – alkis

回答

0

謝謝你帶領我在正確的方向。我將它改爲$(document).ready(function(event){它現在很棒!