HTML教程-HTML5地理定位

地理定位是HTML5中最好的API之一，用于确定用户在Web应用程序中的地理位置。

HTML5的这一新功能允许您通过JavaScript获取当前网站访问者的纬度和经度坐标。这些坐标可以通过JavaScript捕获并发送到服务器，服务器可以在网站上显示您的当前位置。

大多数地理定位服务使用网络路由地址，如IP地址、RFID、WIFI和MAC地址或内部GPS设备来确定用户的位置。

提示：要完全理解地理定位API的概念，您必须对JavaScript有一些了解。

用户隐私：

用户的位置是个人隐私的问题，因此地理定位API在获取位置之前会征得用户的许可来保护用户的隐私。地理定位API发送一个通知提示框，用户可以选择允许或拒绝，只有在用户允许的情况下才能确定其位置。

注意：要使用地理定位API，您的浏览器必须支持地理定位。虽然大多数浏览器和移动设备都支持地理定位API，但该API仅适用于HTTPS请求。

地理定位对象

地理定位API使用navigation.geolocation对象进行操作。它的只读属性返回一个地理定位对象，该对象标识用户的位置，并可以根据用户位置生成自定义结果。

语法：

geo = navigator.geolocation;

如果该对象存在，则可以使用地理定位服务。

地理定位方法

地理定位API使用地理定位接口的三个方法，如下所示：

方法	描述
getCurrentPosition()	用于确定设备或用户的当前位置，并返回包含数据的位置对象。
watchPosition()	每当设备位置发生变化时返回一个值。
clearWatch()	取消之前的watchPosition()调用。

检查浏览器是否支持：

navigator.geolocation对象的geolocation属性有助于确定地理定位API的浏览器支持情况。

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <title>Geolocation API</title>
</head>
<body>
  <h1>Find your Current location</h1>
  <button onclick="getlocation()">Click me</button>
  <div id="location"></div>
  <script>
    var x = document.getElementById("location");

    function getlocation() {
      if (navigator.geolocation) {
        alert("Your browser is supporting Geolocation API");
      } else {
        alert("Sorry! Your browser is not supporting");
      }
    }
  </script>
</body>
</html>

获取用户的当前位置：

要获取用户的当前位置，使用navigator.geolocation对象的getCurrentPosition()方法。该方法接受三个参数：

一个成功回调函数，用于处理位置信息。
一个可选的错误回调函数，用于处理定位错误。
一个可选的配置对象，包含其他的定位选项。

下面是一个使用getCurrentPosition()方法获取用户当前位置的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Geolocation API</title>
</head>
<body>
  <h1>Find your Current location</h1>
  <button onclick="getlocation()">Click me</button>
  <div id="location"></div>
  <script>
    var x = document.getElementById("location");

    function getlocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {
      x.innerHTML = "Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude;
    }
  </script>
</body>
</html>

解释：

首先检查浏览器是否支持地理定位API。
使用getCurrentPosition()方法获取当前位置。
使用showPosition()方法获取经纬度值，showPosition()是getCurrentPosition()的回调方法。

处理错误和拒绝：使用错误回调函数

getCurrentPosition()方法的第二个参数是错误回调函数。它是一个可选参数，用于处理获取用户位置时的错误和用户拒绝的情况。

以下是调用错误回调函数的可能选项：

发生未知错误
用户拒绝共享位置
位置信息不可用
请求位置超时

示例

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      alert("用户拒绝了地理定位请求。");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("用户位置信息不可用。");
      break;
    case error.TIMEOUT:
      alert("获取用户位置的请求超时。");
      break;
    case error.UNKNOWN_ERROR:
      alert("发生未知错误。");
      break;
  }
}

在Google地图上显示位置

到目前为止，我们已经了解了如何使用纬度和经度值显示位置，但这还不够。因此，我们还可以使用该API在Google地图上显示准确的位置。

以下示例显示了使用Google地图显示位置。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>Geolocation API</title>
   </head>
   <body>
      <h2>在下面的地图上查找您的位置</h2>
      <button onclick="getlocation();">显示位置</button>
      <div id="demo" style="width: 600px; height: 400px; margin-left: 200px;"></div>
      
      <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
      
      <script type="text/javascript">
         function getlocation() {
            if (navigator.geolocation) {
               navigator.geolocation.getCurrentPosition(showPos, showErr);
            } else {
               alert("抱歉！您的浏览器不支持地理定位API");
            }
         }
         
         // 在Google地图上显示当前位置
         function showPos(position) {
            latt = position.coords.latitude;
            long = position.coords.longitude;
            var lattlong = new google.maps.LatLng(latt, long);
            var myOptions = {
               center: lattlong,
               zoom: 15,
               mapTypeControl: true,
               navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
            };
            var maps = new google.maps.Map(document.getElementById("demo"), myOptions);
            var markers = new google.maps.Marker({position: lattlong, map: maps, title: "您在这里！"});
         }
         
         // 处理错误和拒绝
         function showErr(error) {
            switch(error.code) {
               case error.PERMISSION_DENIED:
                  alert("用户拒绝了地理定位请求。");
                  break;
               case error.POSITION_UNAVAILABLE:
                  alert("用户位置信息不可用。");
                  break;
               case error.TIMEOUT:
                  alert("获取用户位置的请求超时。");
                  break;
               case error.UNKNOWN_ERROR:
                  alert("发生未知错误。");
                  break;
            }
         }
      </script>
   </body>
</html>

位置属性

Geolocation API的getCurrentPosition()方法返回一个回调函数，该函数检索用户位置信息。此回调函数返回一个包含所有位置信息并指定不同属性的Position对象。它始终返回纬度和经度属性，但下表描述了Position对象的一些其他属性。

属性	描述
`coords.latitude`	以十进制数形式返回用户位置的纬度。
`coords.longitude`	以十进制数形式返回用户位置的经度。
`coords.altitude`	返回以米为单位的海拔高度（仅在可用时）。
`coords.accuracy`	返回用户位置的准确度。
`coords.altitudeAccuracy`	返回用户位置的海拔高度准确度（如果可用）。
`coords.heading`	以度为单位返回相对于北方的顺时针方向的方向（如果可用）。
`coords.speed`	返回以米每秒为单位的速度（如果可用）。
`timestamp`	返回响应的日期或时间（如果可用）。

监听当前位置：

如果我们想要在用户移动时了解用户位置，并希望在每次位置发生变化时获取准确的位置，可以使用watchPosition()回调函数来实现。

此函数具有与getCurrentPosition()相同的三个参数。

语法：

var id = navigator.geolocation.watchPosition(success[, error[, options]])

watchPosition()方法返回一个ID，该ID可以用于唯一标识用户的位置，并且此ID还可以与clearWatch()方法一起使用以停止监听位置。

语法：

navigator.geolocation.clearWatch(id);

浏览器支持：

API	Chrome	IE	Firefox	Opera	Safari
Geolocation	5.0 - 49.0 (http) 50.0 (https)	9.0	3.5	16.0	5.0