地图视图未使用PhoneGap加载
Map view is not loading with PhoneGap
我正在使用PhoneGap和jQueryMobile开发一个iPhone应用程序,在我的应用程序中我有两个html页面,第一个是index.html页面,第二个是mapView.html,现在,我的问题是当我使用从index.html打开mapView.html时
function loadMap() {
$.mobile.changePage( "mapView.html", { transition: "pop"} );
}
地图未加载。如果我在任何浏览器上打开mapView.html,它都能很好地工作,即使我通过更改
直接加载mapView.htmlself.viewController.startPage = @"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>
$.mobile.changePage
使用jQuery Mobile AJAX功能。jQueryMobile只加载DOM中第一个datarole="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中添加以下代码:
<!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>
我希望这能有所帮助。
- Cordova/Phonegap在主要的Cordova网络视图中加载外部站点
- 地图视图未使用PhoneGap加载
- phoneGap/Cordova插件加载顺序/交易w/AdBlock
- 使用phonegap在webview中加载资产
- Jsons't在将phonegap版本升级到cli-5.4后加载
- 使用phonegap在jquery-mobile中链接页面/加载javascript的最佳实践是什么
- phonegap的JSON加载问题
- Phonegap-返回按钮重新加载整个页面
- 如何在Phonegap中进行AJAX调用时添加加载屏幕
- PhoneGap(Cordova)应用程序加载谷歌图表API时崩溃
- Phonegap插件未加载
- Eclipse Phonegap无法使用jquery.load函数加载外部字符串文件
- 在Phonegap中以编程方式加载Admob填隙
- 在Android Phonegap中加载附加模板时,JavaScript点击需要时间
- 在Phonegap中加载通知
- Phonegap/Cordova 3.1 由于页面加载而重置插件
- Javascript - 加载GIF冻结,同时将图像绘制到画布(Phonegap/Cordova)
- PhoneGap 在应用程序浏览器加载停止事件问题
- 如何异步加载 http://debug.build.phonegap.com
- 动态加载phonegap.js的问题