我正在使用 PhoneGap 和 jQueryMobile 开发一个 iPhone 应用程序，在我的应用程序中我有两个 html 页面，第一个是 index.html 页面，第二个是 mapView.html，现在，我的问题是当我从 index.html 打开 mapView.html 时。 html 使用
function loadMap() {
$.mobile.changePage( "mapView.html", { transition: "pop"} );
}
map 未加载。如果我在任何浏览器上打开 mapView.html 它都能完美运行，即使我通过更改
直接加载 mapView.html
self.viewController.startPage = @"mapView.html";
在 appDelegate 类映射加载到屏幕上。有人知道为什么当我从另一个 .html 页面打开 map 时 map 没有加载吗？我的 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>
最佳答案
$.mobile.changePage 使用 jQuery Mobile AJAX 功能。 jQuery Mobile 仅加载 DOM 中第一个 data-role="page"元素内的代码。
As stated in the jQuery Mobile docs , in jQuery Mobile, AJAX is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler
$(document).ready()only executes for the first page.
您可以在下面找到一个包含两个页面的工作示例，导航是通过 Ajax 执行的， map 是在第二个页面中加载的:
另请注意，您可以使用 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>
希望对您有所帮助。
关于javascript - map View 未加载 PhoneGap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12247516/