HTML5地理位置

地理位置是最好的HTML5 API之一，用于识别Web应用程序的用户地理位置。

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

大多数地理位置服务都使用网络路由地址，例如IP地址，RFID，WIFI和MAC地址或内部GPS设备可识别用户的位置。

注意:提示:要完全理解Geolocation API的概念，您必须具有一些JavaScript知识。

用户隐私:

用户的位置与隐私有关，因此地理定位API通过在获取位置之前获得用户的许可来保护用户的隐私。地理位置API发送一个通知提示框，用户可以允许或拒绝它，如果用户允许，则只会标识他的位置。

注意:您的浏览器必须支持地理位置，才能将其用于Web应用程序。尽管大多数浏览器和移动设备都支持Geolocation API，但该API仅可用于HTTPS请求。

地理位置对象

地理位置API与navigation.geolocation对象配合使用。它的只读属性返回一个Geolocation对象，该对象标识用户的位置，并可以基于用户的位置生成自定义结果。

语法:

geo=navigator. geolocation;

如果存在此对象，则可以获取地理位置服务。

地理位置方法

地理位置API使用以下三种地理位置接口方法:

方法	说明
getCurrentPosition()	它标识设备或用户的当前位置，并返回带有数据的位置对象。
watchPosition()	只要设备位置发生更改，就返回一个值。
clearWatch()	它将取消上一个watchPosition()调用

检查浏览器支持:

navigator.geolcation对象的geolocation属性有助于确定浏览器对Geolocation API的支持。

获取用户的当前位置:

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

成功:获取用户位置的成功回调函数 错误:一个错误回调函数，该函数以"位置错误"对象为输入。 选项::它定义了各种获取位置的选项。

下面的示例将返回访问者当前位置的经度和纬度。

示例

<!DOCTYPE html>
<html>
<head>
<title>地理位置API</title>
</head>
<body>
  <h1>查找您的当前位置</h1>
<button onclick="getlocation()">单击我</button>
<div id="location"></div>
<script>
var x= document.getElementById("location");
    function getlocation() {
     if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(showPosition)
     }
     else
     {
             alert("抱歉！您的浏览器不支持")
         } }
     function showPosition(position){
       var x = "您的当前位置是 (" + "纬度: " + position.coords.latitude + ", " + "经度: " + position.coords.longitude + ")";
                document.getElementById("location").innerHTML = x;
     }
</script>
</body>
</html>

解释:

首先检查浏览器支持通过getCurrentPosition()获取当前位置使用showPosition()方法获取纬度和经度值，该方法是getCurrentPosition()的回调方法。

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

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

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

发生未知的随机错误如果用户拒绝共享位置位置信息不可用位置请求超时。

示例

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

在Google地图上显示位置

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

以下示例显示了使用Google Map的位置。

示例

<!DOCTYPE html>
<html>
    <head>
      <title>地理位置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("抱歉！您的浏览器不支持Geolocation 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:"You are here!"});
        }
        // 处理错误和拒绝
             function showErr(error) {
              switch(error.code){
              case error.PERMISSION_DENIED:
             alert("用户拒绝了Geolocation API的请求。");
              break;
             case error.POSITION_UNAVAILABLE:
             alert("用户位置信息不可用。");
            break;
            case error.TIMEOUT:
            alert("获取用户位置的请求超时。");
            break;
           case error.UNKNOWN_ERROR:
            alert("发生未知错误。");
            break;
           }
        } </script>
    </body>
</html>

要了解有关Google Maps JavaScript API的更多信息，可以单击以下链接: https://developers.google.com/maps/documentation/javascript/reference。

位置属性

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

属性	说明
coords.latitude	它以十进制数返回用户位置的纬度。
coords.longitude	它将用户位置的经度作为十进制数字返回。
coords.altitude	它返回海拔高度（以米为单位）的海拔高度（仅适用）。
coords.accuracy	它返回用户位置的准确性。
coords.altitudeAccuracy	它返回用户位置的高度精度。（如果有）
coords.heading	它从北按顺时针方向返回标题。（如果有）
coords.speed	它返回以米/秒为单位的速度。（如果有）。
timestamp	它返回数据或响应时间。（如果可供使用的话）。