我已下载了PhoneGap 1.5.0文件的Google Map示例。它在Android中使用Cordova-1.5.0.js
文件正常工作。但是当我保留Cordova-2.0.0.js文件时,Map不会显示。
try-catch块中没有错误。可能是什么问题?什么是Cordova 2.0.0中简单Map的样本?
我的代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"rel="stylesheet"type="text/css" />
<script type="text/javascript" src="googlemap.js"></script>
<script type="text/javascript" src="reachability.js"></script>
<script charset="utf-8" src="cordova-2.2.0.js"></script>
<!-- iPad/iPhone specific CSS below, add after your main CSS >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<!-- <script>
if (navigator.userAgent.toLowerCase().match(/android/)) {
document.write('<script charset="utf-8" src="cordova-1.5.0.js"><\/script>');
}
else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) {
document.write('<script charset="utf-8" src="cordova-1.5.0.js"><\/script>');
}
</script> -->
<script type="text/javascript">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
/*
function handleOpenURL(url)
{
// TODO: do something with the url passed in.
}
*/
function onBodyLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady()
{
var reachability = new Reachability();
if(reachability.IsNotConnected()){
navigator.notification.alert('No internet connection available',null, '', 'OK');
}
else{
try{
var map = new GoogleMap();
map.initialize();
}catch(e){
alert(e.message);
}
}
}
</script>
</head>
<body onload="onBodyLoad()">
<div id="map_canvas">
Couldn't load map because there was no internet connection available
</div>
</body>
</html>
function GoogleMap(){
this.initialize = function(){
try{
var map = showMap();
}
catch(e) {
alert(e.message);
}
}
var showMap = function(){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
try {
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
catch(e) {
alert(e.message);
}
return map;
}
}
function Reachability(){
this.IsNotConnected = function(){
if(navigator.network.connection.type == Connection.NONE || navigator.network.connection.type == Connection.UNKNOWN)
{
return true;
}
else
{
return false;
}
}
}
答案 0 :(得分:1)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"rel="stylesheet"type="text/css" />
<script type="text/javascript" src="googlemap.js"></script>
<script type="text/javascript" src="reachability.js"></script>
<script charset="utf-8" src="cordova-2.2.0.js"></script>
<!-- iPad/iPhone specific CSS below, add after your main CSS >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript">
// If you want to prevent dragging, uncomment this section
/*
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove", preventBehavior, false);
*/
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
/*
function handleOpenURL(url)
{
// TODO: do something with the url passed in.
}
*/
function onBodyLoad(){
//document.addEventListener("deviceready", onDeviceReady, false);
onDeviceReady()
}
/* When this function is called, Cordova has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady()
{
// var reachability = new Reachability();
// if(reachability.IsNotConnected()){
// navigator.notification.alert('No internet connection available',null, '', 'OK');
// }
// else {
// try{
var map = new GoogleMap();
map.initialize();
// }
// catch(e){
// alert(e.message);
// }
// }
}
</script>
</head>
<body onload="onBodyLoad()">
<div id="map_canvas">
Couldn't load map because there was no internet connection available
</div>
</body>
</html>
在Google Chrome中运行代码。 不是:检查插件是否正常工作。