我是新来的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‘ Warvar 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);
}