1

jquerymobile/phonegap プロジェクトで Google マップ 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 に答える