2013-08-29 53 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){它现在很棒!