html5谷歌地图,谷歌地图API和HTML 5

我是新来的Stackoverflow，所以要善良。谷歌地图API和HTML 5

我一直在使用谷歌地图api和一些其他的东西来制作游戏的项目。这个想法是使用地理定位数据来清除地图上的雾(当你开始时地图充满了雾，你必须四处走走才能清除雾)

唯一的问题是地理定位需要HTML5才能运行每次我将我的文档类型从严格更改为5时，地图不会加载。我可以理解，如果相反，但我似乎无法解决这个问题。

如果有人知道如何处理这个问题，我会非常感激。

这里是代码：

-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Fog o‘ War

Fog O' War

Fight against your enviroment!

Explore your enviroment to clear the fog from your map, once you clear the board you win!

Username:

Password:

Copyright Fog O' War Created by Jamie Pates

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);

}