[读书笔记]地理位置Geolocation API



5.1 位置信息

HTML5 Geolocation API，请求一个位置信息，如果用户同意，浏览器返回位置信息，该位置信息是通过支持HTML5地址定位功能的底层设备提供给浏览器的，位置信息由纬度， 经度坐标和其他元数据组成。

5.1.1 纬度和经度作弊啊

表示方式

1） 十进制，如39.17222

2）DMS 角度格式 （例如，39°10’20’

HTML5 Gelocation API 返回坐标的格式是十进制格式

5.1.2 位置信息从何而来

设备可以使用的数据源

1）IP地址

2）三维坐标

     GPS全球定位系统； RFID， Wifi和蓝牙到Wifi的Mac地址；GSM霍CDMA手机ID

3）用户自定义的数据

5.1.3 IP地址地理定位数据

IP地址是ISP提供的，其地址往往就由服务供应商的物理地址决定

优点：任何地方都可以用， 在服务器端处理

缺点：不精确， 运算代价大

5.1.4 GPS地理定位数据

优点:很精确

缺点： 定位时间长，用户耗电大， 室内效果不好，需要额外硬件设备

5.1.5 Wifi地理定位数据

基于Wifi的地理定位信息是通过三角距离计算得出来的， 这个三角距离指的是永固当前位置到已知的多个wifi接口点的距离。

优点： 精确，可在室内使用， 可以简单、快捷定位

缺点：在乡村这些无线接入点较少的地区效果不好。

5.1.6 手机地理定位数据

通过用户到一些基站的三角距离确定的，相当准确。通常基于wifi和就GPS的地理定位信息结合使用

优点：相当准确， 可在室内使用，可以简单、快捷定位

确定：需要能够访问手机或其modem的设备， 在基站较少的偏远地区效果不好。

5.1.7 用户自定义的地址位置数据。

通过用户输入的地址，邮政编码，来感知位置

优点：可以获得比程序定位服务更准确的位置数据，允许地址服务的结果作为备用位置信息，用户自行输入可能比自动检测更快。

缺点：可能很不准确，特别是用户位置变更后。

5.2 HML5 Geoloaction的浏览器支持情况。

目前主流浏览器都支持。

5.3 隐私

HTML5 Ceolocation规范提供了一套保护用户隐私的机制。除非得到用户明确许可，否则不可获取位置信息。

5.4 使用HTML Geolocation API

5.4.1 浏览器支持性检查

navigator.geolocation

5.4.2 位置请求

两种类型请求方式

1） 单次定位请求

navigator.geolocation.getCurrentPosition (int PosionCallback successCallback, 

     int optional PositionErrorCallback errorCallback,

     int optional PositionOptions options);

2）重复性的位置更新请求

var watchId = navigator.geolocation.watchPosition(int PosionCallback successCallback, 

     int optional PositionErrorCallback errorCallback,

     int optional PositionOptions options);

5.4.3 取消监听

navigator.geolocation.clearWatch(watchId);

5.5 HTML5 Geoloaction应用，获取经纬度，获取走过的距离。

如代码所示。

var   totalDistance = 0.0;

var   lastLat;

var   lastLong;

/**

  *   转换为角度。

  */

Number.prototype.toRadians =   function () {

       return   this   * Math.PI / 180;

};

/**

  *   获取两点间的距离

  *   @param   latitude1

  *   @param   longitude1

  *   @param   latitude2

  *   @param   longitude2

  *   @returns   {Number}

  */

function   distance(latitude1, longitude1, latitude2, longitude2) {

       //R是地球的半径，单位为km

       var   R = 6371;

       var   deltaLatitude = (latitude2 - latitude1).toRadians();

       var   deltaLongitude = (longitude2 - longitude1).toRadians();

      latitude1 = latitude1.toRadians();

      latitude2 = latitude2.toRadians();

      

       var   a = Math.sin(deltaLatitude / 2) *

                  Math.sin(deltaLatitude / 2) +

                  Math.cos(latitude1) *

                  Math.cos(latitude2) *

                  Math.sin(deltaLongitude / 2) *

                  Math.sin(deltaLongitude / 2);

       var   c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

       var   d = R * c;

       return   d;

}

/**

  *   更新错误信息

  *   @param   message

  */

function   updateErrorStatus(message) {

      $( "#status" ).html(   "<strong>Error:</strong>"   + message);

}

/**

  *   更新状态

  *   @param   message

  */

function   updateStatus(message) {

      $( "#status" ).html(message);

}

/**

  *   获取坐标成功后的，回调函数

  *   更新经纬度，路径长度等信息

  *   @param   position

  */

function   updateLocation(position) {

      updateStatus(   "locating..." );

       var   latitude = position.coords.latitude;   //纬度

       var   longitude = position.coords.longitude;   //经度

       var   accuracy = position.coords.accuracy;   //准确度

       var   timestamp = position.timestamp;   //时间戳

      

      $( "#latitude" ).html(latitude);

      $( "#longitude" ).html(longitude);

      $( "#accuracy" ).html(accuracy);

      $( "#timestamp" ).html(timestamp);

      

       if   (accuracy >= 30000) {

            updateStatus(   "Need more accurate values to calculate distance" );

               return ;

      }

      

       if   (lastLat && lastLong) {

               var   currentDistance = distance(latitude, longitude, lastLat, lastLong);

            $(   "#currDist" ).html(currentDistance.toFixed(2) +   "km" );

            

            totalDistance += currentDistance;

            $(   "#totalDist" ).html(totalDistance.toFixed(2) +   "km" );

            updateStatus(   "Location successfully updated" );

      }

      

      lastLat = latitude;

      lastLong = longitude;

}

/**

  *   出错的回调函数

  *   @param   error

  */

function   handleLocationEror(error) {

       switch   (error.code) {

       case   0:   //其他错误

            updateErrorStatus(   "There was an error while retrieving your location. Additional detail:"   + error.message);

               break ;

       case   1:   //权限错误，用户选择拒绝浏览器获取其位置信息

            updateErrorStatus(   "The user opted not to share his or her location." );

               break ;

       case   2:   //尝试获取用户位置信息，但失败了。

            updateErrorStatus(   "The browser was unable to determine your location. Additional details:"   + error.message);

               break ;

       case   3:   //设置了可选的timout 值，超时了。

            updateErrorStatus(   "The browser timed out before retrieving the location." );

               break ;

       default :   //其他错误

            updateErrorStatus(   "Unkowned error" );

               break ;

      }

}

$( function   () {

       if   (isSupportGeoloaction()) {

            $(   "#status" ).html(   "Geoloaction supported" );

            navigator.geolocation.watchPosition(updateLocation, handleLocationEror, {timeout: 1000*10});

      }   else   {

            $(   "#status" ).html(   "Geoloaction is not supported in your browser" );

      }

});

/**

  *   检测是否支持 geolocation

  *   @returns   {Boolean}

  */

function   isSupportGeoloaction() {

       //如果存在地理定位对象，navigator.geoloaction调用将返回该对象

       if   (navigator.geolocation) {

               return   true ;

      }

       return   false ;

}

5.6 代码下载，百度网盘连接

链接: http://pan.baidu.com/s/1mgojuas 密码: qbe9

注：建议将代码放在手机上运行，打开其中.html文件即可运行，建议使用自带浏览器霍FIrefox浏览器打开