当我在Android上加载我的代码时,它给了我一个空白屏幕,当我在firefox中加载它时,我得到了“Map Created”,在控制台中没有错误。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HD testapp</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Link to CSS-->
<link rel="stylesheet" type="text/css" href="style_ride.css">
<!--Link to Javascript file
<script src="js.js"></script>-->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initGeolocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallBack, errorCallBack);
} else {
document.getElementById('status').innerHTML = "Geolocation failed";
}
}
function errorCallBack() {
document.getElementById('status').innerHTML = "Map failed";
}
function successCallBack(position) {
var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
document.getElementById('status').innerHTML = "Coordinates initialized";
var map_options = {
zoom: 15,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
document.getElementById('status').innerHTML = "Map options created";
map_container = document.getElementById('map');
document.getElementById('status').innerHTML = "Map container created";
var map = new google.maps.Map(map_container, map_options);
document.getElementById('status').innerHTML = "Map created";
}
</script>
</head>
<body onload="javascript:initGeolocation()">
<div id=map" style="height:100%; width:100%;"></div>
<p id="status"></p>
</body>
这是HTML代码,我一直在疯狂地试图弄清楚出了什么问题。我的最终目标是获得一张跟随你的地图,但要让它显示出来是第一步!
P.S。仅链接的CSS中心对齐调试文本。
/*Whole page classes*/
body {
text-align: center;
}