现在我已经看到了一些与此相关的主题,其中大部分是因为宽度高度,但是我的代码中有这个。
<!DOCTYPE html>
<html>
<head>
<title>MAP APPLICATION</title>
<meta name="viewport" content="user-scalable=no,initial-scale=1, maximum-scale=1,minimum-scale=1, width=device-width;" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=----MY KEY---&sensor=true"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
var watchID = null;
// PhoneGap is ready
//
function onDeviceReady() {
// Update every 3 seconds
var options = { frequency: 3000, enableHighAccuracy: true };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'<hr />' + element.innerHTML;
var latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
center: latLng,
panControl: false,
zoomControl: true,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_holder'),mapOptions);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
// onError Callback receives a PositionError object
//
function onError(error) {
var errString = '';
// Check to see if we have received an error code
if(error.code) {
// If we have, handle it by case
switch(error.code) {
case 1: // PERMISSION_DENIED
errString =
'Unable to obtain the location information ' +
'because the device does not have permission '+
'to the use that service.';
break;
case 2: // POSITION_UNAVAILABLE
errString =
'Unable to obtain the location information ' +
'because the device location could not be ' +
'determined.';
break;
case 3: // TIMEOUT
errString =
'Unable to obtain the location within the ' +
'specified time allocation.';
break;
default: // UNKOWN_ERROR
errString =
'Unable to obtain the location of the ' +
'device due to an unknown error.';
break;
}
}
// Handle any errors we may face
var element = document.getElementById('map_holder');
element.innerHTML = errString;
}
</script>
</head>
<body>
<p id="geolocation">Watching geolocation...</p>
<button id="btnWatchPosition" onclick="onDeviceReady();">TOGGLE</button> <br>
<div id="map_holder" width="100%" height="100%"></div>
</body>
</html>
在我按下切换按钮后,坐标显示出来了......但没有地图显示出来,我做错了什么。