Question

我正致力于基于位置的服务。我找不到任何与我的后续查询相关的明确答案，所以我问 -

如何在我们自己的服务器中启用HTML5地理位置？或者是否有任何中央地理位置数据库默认提供位置服务（如DNS）？

在我的笔记本电脑（显然是免费的GPS）中，谷歌地图（http://html5demos.com/geo）中的地理定位的准确性让我震惊，这在~20M范围内。什么是技术？如何在我们自己的系统中实现它？

当我以前搜索我的IP位置时，它曾用于显示地图中的ISP办公室，这个办公室距离大约15公里，而不是最近显示几乎准确位置的情况。可能是什么原因？可能是因为我使用相同的Wireles路由器使用我的Android手机并从那里获取位置？或者在HTML5中，他们开始定位特定的IP地址（这似乎不太可能）。

Answer 1

您可以在优秀的Dive Into HTML 5中找到有关其工作原理以及如何在您自己的网站中使用它的大量信息。本书建议使用Modernizr，其中提供了一个简单示例：

function get_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// no native support; maybe try Gears?
} 
}

它在笔记本电脑上工作的主要方式是使用本地无线的已知位置接入点。这在浏览器与浏览器之间略有不同 - firefox有a good explanation here。他们使用positioning services from Google，这是由Google街景汽车完成的映射创建的。

Answer 2

function GetGeolocation() {

navigator.geolocation.getCurrentPosition(GetCoords, GetError);

}

现在检查GetCords功能

function GetCoords(position){

alert('latitude: '+ position.coords.latitude);

alert('longitude: '+ position.coords.longitude);

alert('accuracy: '+ position.coords.accuracy);

FindmeOnMap(position.coords.latitude, position.coords.longitude);

}

Answer 3

// Check for geolocation support
if (navigator.geolocation) {
    // Use method getCurrentPosition to get coordinates
    navigator.geolocation.getCurrentPosition(function (position) {
        // Access them accordingly
        alert(position.coords.latitude + ", " + position.coords.longitude);
    });
}

来自

http://robertnyman.com/2010/03/15/geolocation-in-web-browsers-to-find-location-google-maps-examples/

Answer 4

实际上非常简单。从Dive到HTML的上述示例是不完整的，因为它没有显示show_map函数，这是一个用户创建的函数，它实际上读取传入的数据并对其执行某些操作。这是一个更完整的例子：

<!DOCTYPE HTML>

<html lang = "en">

<head>

  <title>location.html</title>

  <meta charset = "UTF-8" />

  <script type = "text/javascript">

  //<![CDATA[



  function getLoc(){

    navigator.geolocation.getCurrentPosition(showMap);

  } // end getLoc



  function showMap(position){

    var lat = position.coords.latitude;

    var long = position.coords.longitude;

    var linkUrl = "http://maps.google.com?q=" + lat + "," + long;

    var mapLink = document.getElementById("mapLink");

    mapLink.href = linkUrl;

    var embedMap = document.getElementById("embedMap");

    embedMap.src = linkUrl + "&z=16&amp;output=embed";

  } // end showMap



  //]]>

  </script>

</head>



<body onload = "getLoc()">

  <h1>Geolocation Demo</h1>



  <p>

    <a id = "mapLink"

       href = "http://maps.google.com">click for a map</a>

  </p>



<iframe id = "embedMap"

        width="800" 

        height="500" 

        frameborder="0" 

        scrolling="no" 

        marginheight="0" 

        marginwidth="0" 

        src= "">

</iframe><br />



</body>

</html>

这个例子（来自我即将出版的HTML5书）有一个由body onload机制调用的getLoc（）函数。这使用navigator.geolocation.getCurrentPosition（）函数来请求权限向量。它将弹出一个权限对话框，如果用户选择不共享其当前位置，该对话框将被拒绝。如果用户确实在播放，将显示指示的回调函数（在我的情况下为showMap）。

回调函数自动接受一个特殊的位置对象作为其唯一参数。此对象具有许多可能有用的属性，但纬度和经度是最有用的。您可以使用这些值来简单地打印出当前位置。您还可以将这些值连接到Google地图网址，以获取当前位置的快速Google地图。我还将Google地图嵌入到当前页面中，并更改了嵌入式（iframe）地图的网址以获得即时反馈。

希望这有帮助！

Answer 5

试用此代码

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <!--
    Include the maps javascript with sensor=true because this code is using a
    sensor (a GPS locator) to determine the user's location.
    See: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 6
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

谷歌地图和HTML5中的地理位置

5 个答案: