情况
我目前正在为希望集成 Google 地图的客户开发应用程序。他希望地图显示从用户所在的任何地方到他的办公室的路线。
我正在使用 Windows 8，没有任何 IDE（使用 Sublime Text 2）。
我已经设法让它在本地运行 a) 我的 Chrome 浏览器，b) 在 Ripple Emulator for PhoneGap/Cordova >2.0.0 中。但是，无论何时尝试，它都无法在我的 Android 手机 (HTC Sensation) 上运行。它让我发疯，我正要放弃它并找到其他一些“愚蠢”的解决方案（如静态地图或 geo:url 界面）。
在我尝试实际实现地图之前，我运行了 PhoneGap Geolocation 完整示例，在此处找到。我注意到我的 Android 手机确实正确显示了我的当前位置（纬度/经度/时间戳等）。因此，我相信我的手机上已设置了正确的权限（位置 -> 等）。
问题
谷歌地图根本没有出现在我的安卓设备上。我看到红色背景（用于调试），所以我知道高度和宽度都很好。但我没有看到任何谷歌地图的迹象（没有按钮、覆盖、网格或任何东西）。
编码
用于加载 jQuery、Cordova 和 Maps API v3 的 HTML 代码：
<script type="text/javascript" src="js/jquery-1.10.0.min.js" ></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true&language=da"></script>
这是我用来放置地图的 HTML：
<div id="map-canvas"
style="display:block;
overflow:hidden;
position:relative;
border:1px solid #aaaaaa;
width: 100%;
height: 400px;
background: red;">
</div>
<div id="map-panel" style="width:100%; height:90%; position:relative; "></div>
这是我完整的 Google Maps JS（在它自己的文件中）：
var map,
userPosition,
officeLocation,
directionsDisplay,
directionsService;
google.maps.event.addDomListener(window, 'load', setup);
function setup() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy:true});
}
}
function onSuccess(position) {
userPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
navigator.notification.alert("Found user position");
initializeMaps();
//$('#map-canvas').css({'height': $(window).height()/2, 'width': '99%'});
}
function onError(error) {
navigator.notification.alert("code: " + error.code + ",\n" +
"message: " + error.message);
}
function initializeMaps() {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
officeLocation = new google.maps.LatLng(55.689403, 12.521281);
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: officeLocation
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
directionsDisplay.setMap(map);
if (userPosition != '') {
var userPosMarker = new google.maps.Marker({
position: userPosition,
map: map,
title: "Din Placering"
});
calculateRoute();
}
else {
navigator.notification.alert("userPosition is null");
}
}
function calculateRoute() {
//navigator.notification.alert("calculateRoute");
var request = {
origin: userPosition,
destination: officeLocation,
travelMode: google.maps.DirectionsTravelMode["DRIVING"]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setPanel(document.getElementById('map-panel'));
directionsDisplay.setDirections(response);
//navigator.notification.alert("Show directions");
}
else {
navigator.notification.alert("Got status NOT OK from google");
}
});
}
function reloadGoogleMap() {
if (map === null || map === undefined) {
navigator.notification.alert("map is %s", map);
}
else {
var currCenter = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(currCenter);
map.setZoom(12);
//navigator.notification.alert("reloaded map");
}
}
这是我的初始化代码（放在我的head标签的底部）：
<script type="text/javascript" charset="utf-8">
//navigator.notification.alert("listen for deviceready");
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.notification.alert("device ready");
...
// calls other initialization functions
...
initMaps();
..
}
</script>
我的 AndroidManifest.xml 中有这些（以及其他）：
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
我的 config.xml 中有这些（位于 /assets/www/config.xml）：
<access origin="*" />
...
<feature name="http://api.phonegap.com/1.0/device"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="http://api.phonegap.com/1.0/notification"/>
在我看来，我的 onSuccess 方法从未被调用，但我没有看到任何表明用户位置无效的警报。事实上，我在手机上看到的唯一通知是：
map is %s, undefined
在波纹模拟器中，每当我加载应用程序时，我都会得到“找到的用户位置”。
请帮忙！
[编辑] 我忘了提到我正在使用 Adobe 的http://build.phonegap.com来实际构建应用程序。
[EDIT2] 我现在尝试像这样使用 Google API 密钥：
<script src="http://maps.google.com/maps/api/js?key=AIzaSyB1uhDdWjtNEl9K35lJtuq5Sw2BjKR8-OM&sensor=false" type="text/javascript"></script>
但很可惜，没有任何变化。依然没有。
[编辑3]
这是我的完整版androidManifest.xml：
<code>
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:windowSoftInputMode="adjustPan"
package="com.alphastagestudios.danmarksflyttemand" android:versionName="1.0" android:versionCode="2" android:hardwareAccelerated="true">
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<application android:icon="@drawable/icon" android:label="@string/app_name"
android:hardwareAccelerated="true"
android:debuggable="true">
<activity android:name="DanmarksFlyttemandApp" android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="17"/>
<permission android:name="com.alphastagestudios.danmarksflyttemand.permission.MAPS_RECEIVE" android:protectionLevel="signature"/>
<uses-permission android:name="com.alphastagestudios.danmarksflyttemand.permission.MAPS_RECEIVE"/>
</manifest>
</code>
[EDIT4] 我现在尝试使用 PhoneGap 地理位置和基本的谷歌地图构建一个最小的例子。我通过 Eclipse 使用 Cordova v. 2.9.0（最新版本）手动构建了它。奇怪的是，PhoneGap 地理定位示例本身运行良好，但是当我介绍谷歌地图代码时，它都停止工作了。我尝试了这个使用和不使用谷歌 API 密钥的最小示例。没有不同。
这是我使用的 index.html：
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
body, html, #map-canvas {
width: 100%;
height: 400px;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
// onSuccess Geolocation
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
initMap();
}
// onError Callback receives a PositionError object
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
var map,
userPosition,
officeLocation,
directionsDisplay,
directionsService;
function initMap() {
//directionsDisplay = new google.maps.DirectionsRenderer();
//directionsService = new google.maps.DirectionsService();
officeLocation = new google.maps.LatLng(55.689403, 12.521281);
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: officeLocation
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
//directionsDisplay.setMap(map);
}
</script>
</head>
<body>
<p id="geolocation">Finding geolocation...</p>
<div id="map-canvas"></div>
</body>
</html>
[EDIT5] 我现在尝试使用 PhoneGap (Cordova)v 构建应用程序。2.6.0、2.9.0 和 2.8.1 - 没有工作。手机的地理位置工作正常，但谷歌地图没有显示。我只看到它应该在哪里的默认灰色背景。