1
나는 Stackoverflow를 처음 사용하므로 친절합니다.Google지도 API 및 HTML 5
저는 게임을 만들기 위해 Google지도 API 및 기타 자료를 사용하는 프로젝트를 진행하고 있습니다. 아이디어는지도의 안개를 지우는 데 지리적 위치 데이터를 사용하는 것입니다. 시작하면 안개가 가득 찼으며 안개를 없애기 위해 걸어 가야합니다.
유일하게 문제는 지리적 위치가 작동하려면 HTML5가 필요하다는 것입니다. 내 doctype을 strict에서 5로 변경할 때마다 맵이로드되지 않습니다. 나는 반전이 일어나고 있는지 이해할 수 있었지만 이것을 해결할 수는 없다.
누구든지이 문제를 해결하는 방법을 알고 있다면 크게 감사하겠습니다.
사이트 페이지가 http://fog.jamiepat.es
이며, 여기에 코드입니다 :
<!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>