1

我在我的 jquerymobile/phonegap 项目中使用 google maps api。目前，如果您转到地图“页面”并更改缩放级别、拖动地图等，然后导航离开并返回地图页面，它不会保存其状态，它会重新加载地图。我曾尝试使用 dom-cache<div data-role="page" id="map" data-dom-cache="true">但这似乎没有任何帮助。

如何保存地图“状态”并避免在离开和返回时重新加载？

请求的代码

    <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
    }); 
}
4

1 回答 1

0

感谢您带领我朝着正确的方向前进。我将其更改为 $(document).ready(function(event) { 现在效果很好！

于 2013-08-29T14:36:47.057 回答