地图视图未使用 PhoneGap 加载答案

【问题标题】：Map view is not loading with PhoneGap地图视图未使用 PhoneGap 加载
【发布时间】：2012-08-28 04:05:39
【问题描述】：

我正在使用 PhoneGap 和 jQueryMobile 开发一个 iPhone 应用程序，在我的应用程序中我有两个 html 页面，第一个是 index.html 页面，第二个是 mapView.html，现在，我的问题是当我从索引打开 mapView.html 时。 html 使用

function loadMap() {
        $.mobile.changePage( "mapView.html", { transition: "pop"} );
}

地图未加载。如果我在任何浏览器上打开 mapView.html，它可以完美运行，即使我通过更改
self.viewController.startPage = @"mapView.html"; 直接加载 mapView.html
appDelegate 类映射加载到屏幕上。有谁知道为什么我从另一个 .html 页面打开地图时没有加载地图？我的 PhoneGap 版本是 2.0.0
谢谢。

编辑 1：mapView.html 代码

<!DOCTYPE HTML>
<html>
    <head>
        <title>Map Location</title>
        <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="jquery.mobile-1.1.1.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var demoCenter = new google.maps.LatLng(41,-87);

            var map;
            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                                          zoom: 7,
                                          center: demoCenter,
                                          mapTypeId: google.maps.MapTypeId.ROADMAP
                                          });
            }

            function addMarkers()
            {
                // perform your AJAX here. In this example the markers are loaded through the cityList array
                $.ajax({
                       type:'post',
                       url:'test.html',
                       data:'',
                       success:function(data)
                       {

                       // imagine that the data in this list
                       // will be retrieved from the AJAX response
                       // i used the cityList array just for testing
                       var cityList = [
                                       ['Chicago', 41.850033, -87.6500523, 1],
                                       ['Illinois', 40.797177,-89.406738, 2]
                                       ];

                       var marker, i;
                       var infowindow = new google.maps.InfoWindow();
                       for (i = 0; i < cityList.length; i++) 
                       {  
                       marker = new google.maps.Marker({
                                                       position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                                                       map: map,
                                                       title: cityList[i][0]
                                                       });

                       google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                                                       return function() {
                                                                       infowindow.setContent(cityList[i][0]);
                                                                       infowindow.open(map, marker);
                                                                       }
                                                                       })(marker, i));
                       }
                       }
                       });
            }

            $(document).ready(function() 
                              {
                              addMarkers();
                              });
            </script>
    </head>
    <body onload="initialize()">
        <div id="basic-map" data-role="page">
            <div data-role="header" data-theme="b">
                <h1>Map Location</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>      
    </body>
</html>

【问题讨论】：

您需要向我们展示 mapView.html 中加载地图的代码。
如果您可以发布地图页面的代码和过渡代码，这将有助于调试。

标签： javascript ios cordova jquery-mobile

【解决方案1】：

$.mobile.changePage 使用 jQuery Mobile AJAX 功能。 jQuery Mobile 仅加载 DOM 中第一个 data-role="page" 元素内的代码。

如jQuery Mobile docs 中所述，在 jQuery Mobile 中，AJAX 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序 $(document).ready() 仅对第一页执行。

您可以在下面找到一个包含两个页面的工作示例，通过 Ajax 执行导航并在第二个页面中加载地图：

还请注意，您可以使用 rel="external" 或 data-ajax="false" 执行转换。使用这些属性将导致整个页面刷新而没有动画过渡。

工作示例：

说明：

创建文件夹
在文件夹中创建一个名为 maps.js 的文件
在文件夹内创建一个名为 map-intro.html 的文件
在文件夹中创建一个名为 map.html 的文件
为每个创建的文件填写相应的代码，代码如下

在 maps.js 中添加以下代码：

function initialize() {
    var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
    myOptions = {
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: mapCenter
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

$( document ).on( 'pageshow', '#map-page',function(event){
  initialize();
});

$( document ).on( 'click', '#map-anchor', function(event){
  event.preventDefault();
  $.mobile.changePage( "map.html", { transition: "flip" } );
});

在 map-intro.html 中添加以下代码：

<!doctype html>
<html lang="en">
   <head>
        <title>Map Intro Page</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script src="./maps.js"></script>
    </head>
    <body>
        <div id="map-intro-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Map Example</a></h1>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="my-list">
                    <li><a href="#" id="map-anchor">Go to Map</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

在 map.html 中添加以下代码：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>jQuery mobile with Google maps geo directions example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    </head>
    <body>
        <!-- /page -->
        <div data-role="page" id="map-page">
            <!-- /header -->
            <div data-role="header">
                <h1>Map</h1>
                <a data-rel="back">Back</a>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:300px;"></div>
            </div>
        </div>
    </body>
</html>

我希望这会有所帮助。

【讨论】：

是的，这对我有帮助，谢谢您的回答，但是由于整个页面刷新，我面临另一个问题，当我按下 mapView.html 上的后退按钮时，它也会刷新上一页，我不不想那样。对此有什么想法吗？