0

実行時に、インデックス ページの下部にあるリンクをクリックしてマップ ページに移動すると、マップが画面の 4 分の 1 を占めるまで短く表示されてから、マップが消えます。私は何を間違っていますか？

マップ ページを作成するインデックス ページのコードを次に示します。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>          
        <script type="text/javascript">
            function initialize(){
                if(!window.navigator.onLine){
                    alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
                    var element = document.getElementById("mainPage");
                    element.parentNode.removeChild(element);
                    document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
                }
            }
        </script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">   </script> 
        <script type="text/javascript">
            // When map page opens get location and display map
            $('.page-map').live("pagecreate", function() {
                initializeMap(42,-73);
            });
            function initializeMap(lat,lng) {
                var latlng = new google.maps.LatLng(lat, lng);
                var myOptions = {
                    zoom: 8,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
            }
        </script>
    </head>
    <body id="mainBody" onload="initialize()">
        <div id="mainPage" data-role="page" data-theme="e">
            <div data-role="header">
                <!-- <img src="headerlogo.png" />-->
                <br />
                <p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
            </div>
            <div data-role="content" style="height: 100%;">
                <a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
                <a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
                <a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
                <a href="dragMap.html">Testing</a>
           </div>
       </div>
    </body>  
</html>

そして、ここに地図ページがあります：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    </head>
    <body>
        <div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
            <div data-role="header"><h1>Map Page</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>
    </body>
</html>
4

1 に答える 1

0

次のコードが機能します。

私はあなたのコードを単純化し（複数ページのテンプレートの代わりに単一ページのテンプレートを使用しましたが、jsfiddle を簡単にするためだけに）、すべてのスクリプトを頭の中に移動しました。

また、phonegap にも注意してください。ボディの onload イベントではなく、onDeviceReady イベントを処理する必要があります。それでも、オンラインかどうかを確認する別の方法があります。

于 2012-05-24T21:14:35.437 に答える