HTML5 Geolocation 初探

本文转载于:猿2048网站➣HTML5 Geolocation 初探

让我们假设这样一个场景，有一个web应用程序，它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API（地理定位API），可以请求用户共享他们的位置信息。

HTML5 Geolocation技术应用的场景比较多，比如构建计算行走路程、GPS导航的社交应用等。本文主要探讨HTML5 Geolocation API，包括获取地理位置数据的途径，地理位置数据的隐私以及在实际中的应用等。

目前存在两种地理定位请求：单次定位请求和重复性的位置更新请求。

一、地理位置数据的获取

获取地理位置数据的方法有以下几种：

u IP地址地理定位：自动查找用户的IP地址，然后检索其注册的物理地址；

u GPS地理定位：通过收集运行在地球周围的多个GPS卫星信号来实现；

u Wi-Fi地理定位：通过三角距离计算得出（三角距离：用户当前位置到已知的多个Wi-Fi接入点的距离）；

u 手机地理定位：通过用户到一些基站的三角距离确定；

u 用户自定义地理定位：用户自己输入地址、邮政编码和其他一些详细信息。

二、地理位置数据的隐私

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

HTML5地理定位浏览器和设备之间的交互如下所述：

1) 用户从浏览器中打开位置感知应用程序；

2) 应用程序Web页面加载，然后通过Geolocation函数调用请求位置坐标。浏览器拦截这一请求，然后请求用户授权。我们假设用户同意；

3) 浏览器从其宿主设备中检索坐标信息。例如，IP地址、Wi-Fi或GPS坐标。这是浏览器内部功能；

4) 浏览器将坐标发送给受信任的外部定位服务，它返回一个详细位置信息，并将该位置信息发回给HTML5 Geolocation应用程序。

三、HTML5 Geolocation API介绍

在访问使用HTML5 Geolocation API的页面时，会触发隐私保护机制。但是如果仅仅是添加代码，而不被任何方法调用，则不会才触发隐私保护机制。

要使用 HTML5 Geolocation API，首先要检查浏览器是否支持，代码如下：

`1`	`function` `loadDemo(){`

`2`	`If(navigator.geolocation){`

`3`	`document.getElementById("support").innerHTML = "HTML5 Geolocation supported.”`

4 }else{

`5`	`ocument.getElementById("support”).innerHTML = "HTML5 Geolocation is not supported` `in` `your browser.”`

6 }

7 }

单次定位请求API

`1`	`Void getCurrentPosition(in` `PositionCallback successCallBack,`

`2`	`in` `optional PositionErrorCallBack errorCallback,`

`3`	`in` `optiona PositionOptions options)`

上述的函数要通过navigator.geolocation来调用，各个参数解释如下：

successCallBack：浏览器指明位置数据可用时调用的函数，即收到实际位置信息并进行处理的地方，此函数只接受一个参数：位置对象，包含坐标和一个时间戳；

errorCallback：在获取位置数据出错时的处理地方，向用户说明失败原因，可选参数，但是建议使用；

Options：此对象可调整HML5 Geolocation服务的数据收集方式，可选；可以通过JSON对象进行传递，主要包括enableHighAccuracy（启用HML5 Geolocation服务的高精确度模式、timeout（当前位置所允许的最长时间）、maximumAge（浏览器重新计算位置的时间间隔）。

 
      01 
      function successCallBack(position){ 
     
      02 
         var latitude = position.coords.latitude; 
     
      03 
         var longitude = position.coords.longitude; 
     
      04 
         var accuracy = position.coords.accuracy; 
     
      05 
         //此处可以添加代码，把上述三个值显示到页面中。 
     
      06 
         
      07 
      } 
     
      08 
      ffunction errorCallback(error){ 
     
      09 
          switch(error.code){ 
     
      10 
              //UNKNOWN_ERROR = 0 需要通过message参数查找错误的更多信息 
     
      11 
              case 0: 
     
      12 
                  updateStatus("There was an error while retrieving your location:" + error.message); 
     
      13 
                  break; 
     
      14 
              //PERMISSION_DENIED = 1 用户拒绝浏览器获得其共享位置 
     
      15 
              case 1: 
     
      16 
                  updateStatus("The user prevented this page form retrieving a location!"); 
     
      17 
                  break; 
     
      18 
              //POSITION_UNAVAILABLE = 2 尝试获取用户位置，但失败 
     
      19 
              case 2: 
     
      20 
                  updateStatus("The browser was unable to determine your location:" + error.message); 
     
      21 
                  break; 
     
      22 
              //TIMEOUT = 3 设置了可选的timeout值，尝试确定用户位置的过程超时 
     
      23 
              case 3: 
     
      24 
                  updateStatus("The browser timed out before retriveing the !"); 
     
      25 
                  break; 
     
      26 
          } 
     
      27 
      }

重复性位置请求API：

`1`	`var` `watchId = navigator.geolocation.watchPosition(updateLocation,handleLocationError);`

2

`3`	`//停止接收位置更新信息`

`4`	`navigator.geolocation.clearWatch(watchId);`

四、使用HML5 Geolocation构建应用

使用上述讲解的HML5 Geolocation API来实现一个简单有用的Web应用程序—距离追踪器，以了解HML5 Geolocation 的强大之处。

本例主要讲述从网页被加载的地方到目前所在位置所经过的距离。使用众所周知的Haversine公式，其能够根据经纬度来计算地球上两点间的距离。如下：

关于上述原理，请参考网上其他教程。

使用js实现的Haversine公式如下：

`01`	`function` `toRadians(degree){`

`02`	`return` `degree * Math.PI / 180 ;`

03 }

04

`05`	`function` `distance(latitude1,longitude1,latitude1,longitude1){`

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

`07`	`var` `R = 6371;`

`08`	`var` `deltaLatitude = toRadians(latitude2 - latitude1);`

`09`	`var` `deltaLongitude = toRadians(longitude2 - longitude1);`

10

`11`	`latitude1 = toRadians(latitude1);`

`12`	`latitude2 = toRadians(latitude2);`

13

`14`	`var` `a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math.sin(deltaLongitude / 2) * Math.sin(deltaLongitude / 2);`

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

`16`	`var` `d = R * c;`

`17`	`return` `d;`

18 }

HTML网页代码入下：

001 <!DOCTYPE html>

002 <head>

003 <meta charset="utf-8">

004 <title>HTML5 地理定位</title>

005 <link rel="stylesheet" href="styles.css">

006 </head>

007

008 <body onload="loadDemo()">

009

010 <h1>HTML5 地理位置追踪器</h1>

011

012 <p id="status">你的浏览器不支持HTML5地理定位</p>

013

014 <h2>当前位置:</h2>

015 <table border="1">

016 <tr>

017 <th width="40" scope="col"><h5>纬度</h5></th>

018 <td width="114" id="latitude">?</td>

019 </tr>

020 <tr>

021 <td> 经度</td>

022 <td id="longitude">?</td>

023 </tr>

024 <tr>

025 <td>准确度</td>

026 <td id="accuracy">?</td>

027 </tr>

028 <tr>

029 <td>最近的时间戳</td>

030 <td id="timestamp">?</td>

031 </tr>

032 </table>

033

034 <h4 id="currDist">当前旅行的距离: 0.0 km</h4>

035 <h4 id="totalDist">总的旅行距离: 0.0 km</h4>

036

037 </body>

038

039 <script text="text/javascript">

040

041 var totalDistance = 0;

042 var lastLat;

043 var lastLong;

044

045 Number.prototype.toRadians = function() {

046 return this * Math.PI / 180;

047 }

048

049 function loadDemo(){

050

更多专业前端知识，请上【猿2048】www.mk2048.com

HTML5 Geolocation 初探

猜你喜欢