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
});
}
顯示一些代碼也許你在事件'pageshow'上創建你的地圖? – alkis
謝謝你帶領我朝着正確的方向。我將它改爲'$(document).ready(function(event){'現在它工作的很好! – Brian
沒問題。你可以自己貼出答案並接受它,所以你可以幫助其他人問題,當然也會增加你的業力點 – alkis