Google Maps API和HTML 5

Question

我是Stackoverflow的新手，所以请客气。

我一直在使用Google Maps api和其他一些东西制作游戏的项目中。 这个想法是使用地理位置数据来清除地图上的雾（开始时地图上充满了雾，您必须四处走动以清除雾）

唯一的问题是，地理位置需要HTML5才能起作用，并且每当我将文档类型从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&lsquo; 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>

Answer 1

navigator.geolocation对我来说是新的，它需要特定的DOCTYPE。

但是，更多的是CSS问题。 将此添加到您的样式表：

html, body{height:100%;}

Google Maps API和HTML 5

问题描述

1 个解决方案

解决方案1
1 2014-02-21 23:53:55

Google Maps API和HTML 5

问题描述

1 个解决方案

解决方案1 1 2014-02-21 23:53:55

解决方案1
1 2014-02-21 23:53:55