防止 Google 地图在 JqueryMobile 页面中重新加载答案

【问题标题】：Keep Google Maps from reloading in JqueryMobile page防止 Google 地图在 JqueryMobile 页面中重新加载
【发布时间】：2013-08-29 03:35:08
【问题描述】：

我在我的 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>

$(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”上创建地图？
感谢您带领我朝着正确的方向前进。我把它改成了$(document).ready(function(event) {，现在效果很好！
没问题。您可以自己发布问题的答案并接受它，这样您就可以帮助其他有同样问题的人，当然也可以增加您的业力点。
嗯，现在我想起来了，你确定这是要走的路吗？如果您使用“文档就绪”，那么您将只计算一次位置，每次您想要重新计算位置时都必须刷新。如果那是您想要的，那么请不要介意此评论。
谢谢阿基斯。我计划有一个用户可以刷新搜索的按钮。

标签： jquery-mobile google-maps-api-3

【解决方案1】：

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

【讨论】：