【发布时间】：2014-03-23 08:40:43
【问题描述】：
我是 Stackoverflow 的新手，所以请善待。
我一直在从事一个项目，该项目使用 google maps api 和其他一些东西来制作游戏。这个想法是使用地理定位数据来清除地图上的迷雾（开始时地图充满迷雾，您必须四处走动才能清除迷雾）
唯一的问题是地理定位需要 HTML5 才能运行，每次我将文档类型从严格更改为 5 时，地图都不会加载。我可以理解是否发生了相反的情况，但我似乎无法解决这个问题。
如果有人知道如何处理这个问题，我将不胜感激。
这里是代码：
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Fog o‘ War</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" href="favicon.ico">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDFSlrd4CM9cp2ljFi62357dPjF8gSHikg&sensor=false"type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="js/variables.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<div id="screen"></div>
<div id="splash"><div class="logo"></div><div class="footnotes filler"></div></div>
<div id="bob"></div>
<div id="map_canvas"></div>
<div id="sidebar">
<h1>Fog O' War</h1>
<h3>Fight against your enviroment!</h3>
<p>Explore your enviroment to clear the fog from your map, once you clear the board you win!</p>
<form class="login-stuff">
<label for="user" class="label-user">Username: </label><input type="text" placeholder="test" value="Username"></input>
<label for="password" class="label-pass">Password: </label><input type="password" value="Password"></input>
<input onclick="hide();" type=button value="Login" class="login-button">
</form>
<ul class="point-table">
</ul>
<div id="div"></div>
<form>
<input onclick="toggleOverlay(boundmap);" type=button value="Hide Overlay">
</form>
<div class="test"></div>
<div class="footnotes">Copyright Fog O' War <span>Created by Jamie Pates</div>
</div>
<script type="text/javascript">
var username = "Jamlie";
function initialize() {
setWidth();
var styles = [
{
stylers: [
//{hue: "#000000"},
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 0 },
{ visibility: "simplified" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
]
;
myOptions = {
center: new google.maps.LatLng(startingLat-0.00047213146262237, startingLong+0.0028358607292178),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
draggable: false,
maxZoom: 18,
minZoom: 18,
scaleControl: false,
panControl: false,
streetViewControl: false,
zoomControl: false,
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
function getCoords(){
$.get("query.php", function(data){
;
newArrCoords = $.parseJSON(data);
if(newArrCoords.length != arrCoords.length){
arrCoords = newArrCoords;
for(i=0; i<12; i++){
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(MainLatSW[i],MainLongSW[i]),
new google.maps.LatLng(MainLatNE[i],MainLongNE[i]));
var r =+Math.floor(Math.random() * 3) + 1;
mainGrid[i] = new google.maps.GroundOverlay(
"images/testfog"+r+".png",imageBounds);
mainGrid[i].setMap(map);
}
for(j=0; j<9; j++){
var imageBounds2 = new google.maps.LatLngBounds(
new google.maps.LatLng(SecLatSW[j],SecLongSW[j]),
new google.maps.LatLng(SecLatNE[j],SecLongNE[j]));
var r =+Math.floor(Math.random() * 3) + 1;
secGrid[j] = new google.maps.GroundOverlay(
"images/testfog"+r+".png",imageBounds2);
secGrid[j].setMap(map);
}
var coordsIndex = arrCoords.length;
$.each(arrCoords, function (key, value){
for(i=0; i<13; i++){
if((value['Latitude']> MainLatSW[i]) && (value['Latitude']< MainLatNE[i]) && (value['Longitude']> MainLongSW[i]) && (value['Longitude']< MainLongNE[i])){
if(username == value['UserName']){
mainGrid[i].setMap(null);
}
mainCapture[i] = value['UserName'];
}
}
for(j=0; j<7; j++){
if((value['Latitude']> SecLatSW[j]) && (value['Latitude']< SecLatNE[j]) && (value['Longitude']> SecLongSW[j]) && (value['Longitude']< SecLongNE[j])){
if(username == value['UserName']){
secGrid[j].setMap(null);
}
secCapture[j] = value['UserName'];
}
}
coordsIndex--;
if(coordsIndex==0){
var children = mainCapture.concat(secCapture);
populate(children);
}
});
imageBounds3 = new google.maps.LatLngBounds(
new google.maps.LatLng(startingLat -0.0013700348119485, startingLong+ 0.00070032665252739),
new google.maps.LatLng(startingLat-0.0013700348119485+0.0018310528581296 , startingLong+ 0.00070032665252739+0.0042488227844242));
boundmap = new google.maps.GroundOverlay(
"images/boundary.png",imageBounds3
);
boundmap.setMap(map);
}
});
}
window.setInterval(function(){
getCoords();
$('#bob').html(arrCoords);
},1000);
}
</script>
</body >
</html>
【问题讨论】：
标签： javascript html api google-maps maps