HTML5中的GPS定位之getCurrentPosition

8603次浏览

html5中的GPS定位功能主要用的是getCurrentPosition, 该方法封装在 navigator.geolocation 属性里,是 navigator.geolocation 对象的方法。

getCurrentPosition()函数简介

getCurrentPosition(successCallback,errorCallback,positionOptions)

successCallback

表示调用getCurrentPosition函数成功以后的回调函数,该函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值:

accuracy:精确度
latitude:纬度
longitude:经度
altitude:海拔
altitudeAcuracy:海拔高度的精确度
heading:朝向
speed:速度

errorCallback

和 successCallback 函数一样带有一个参数,对象字面量格式,表示返回的错误代码。它包含以下两个属性:

1、message:错误信息
2、 code:错误代码。

其中错误代码包括以下四个值:

1、UNKNOW_ERROR:表示不包括在其它错误代码中的错误,这里可以在 message 中查找错误信息
2、PERMISSION_DENIED:表示用户拒绝浏览器获取位置信息的请求
3、 POSITION_UNAVALIABLE:表示网络不可用或者连接不到卫星
4、TIMEOUT:表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

positionOptions

positionOptions 的数据格式为JSON,有三个可选的属性:

1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。
3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。

getCurrentPosition()函数定位应用

<!DOCTYPE HTML>
   <head>
      <script type="text/javascript">

         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            alert("Latitude : " + latitude + " Longitude: " + longitude);
         }

         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            }else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }

         function getLocation(){

            if(navigator.geolocation){
               // timeout at 60000 milliseconds (60 seconds)
               var options = {timeout:60000};
               navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
            }else{
               alert("Sorry, browser does not support geolocation!");
            }
         }

      </script>

   </head>

   <html>
      <body>
         <form>
            <input type="button" onclick="getLocation();" value="Get Location"/>
         </form>
      </body>
   </html>

点击按钮,就可以回提示是否获取当前位置,允许之后,可以获取你所在位置的经纬度!

相关文章: