Google Maps API和HTML 5

Question

I'm new to Stackoverflow so be kind. 我是Stackoverflow的新手，所以请客气。

I've been working on a project that uses the google maps api and some other stuff to make a game. 我一直在使用Google Maps api和其他一些东西制作游戏的项目中。 The idea is to use geolocation data to clear the fog off of the map (the map is filled with fog when you start and you have to walk around to clear the fog) 这个想法是使用地理位置数据来清除地图上的雾（开始时地图上充满了雾，您必须四处走动以清除雾）

The only problem is that geolocation needs HTML5 to function and every time I change my doctype from strict to 5 the map doesn't load. 唯一的问题是，地理位置需要HTML5才能起作用，并且每当我将文档类型从strict更改为5时，地图都不会加载。 I could understand if the reverse was happening but I can't seem to solve this. 我可以理解是否发生了相反的情况，但似乎无法解决。

If anyone knows how to deal with this I'd appreciate it greatly. 如果有人知道如何处理这个问题，我将不胜感激。

The site page is http://fog.jamiepat.es 该站点页面是http://fog.jamiepat.es

and here is the code: 这是代码：

<!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

It's new to me that navigator.geolocation requires a specific DOCTYPE . navigator.geolocation对我来说是新的，它需要特定的DOCTYPE。

However, it's more a CSS issue. 但是，更多的是CSS问题。 Add this to your stylesheet: 将此添加到您的样式表：

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