地图视图未加载PhoneGap

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

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

地图未加载。 如果我在任何浏览器上打开mapView.html都可以正常工作，即使我通过更改直接加载mapView.html也是如此
self.viewController.startPage = @"mapView.html";
在appDelegate类映射中加载屏幕。 当我从另一个.html页面打开地图时，有没有人知道为什么地图没有加载？我的PhoneGap版本是2.0.0
谢谢。

编辑1： mapView.html代码

           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(); });    
 
 
Map Location
 Back 
 
 
 
 
 
 
   

Answer 1

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

正如jQuery Mobile文档中所述 ，在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中添加以下代码：

            
 
 
Map Example
 
 
 
 
Go to Map
 
 
 
   

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

           
  
 
Map
 Back 
  
 
 
 
   

我希望这有帮助。