Question

运行时，如果我点击索引页面底部的链接进入地图页面，我会看到地图，填充四分之一的屏幕，然后消失。我做错了什么？

以下是索引页面的代码，它创建了地图页面：

<!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>

Answer 1

以下代码有效：jsfiddle

我拿了你的代码，简化了它（使用单页模板而不是多页面模板，但只是为了让jsfiddle更容易）并将所有脚本移到头脑中。

另外要小心phonegap，你应该处理onDeviceReady事件，而不是body onload事件。即使这样，还有一个different method there来检查你是否在线。

无法使用jQuery Mobile显示Google Map？

1 个答案: