HTML5 之地理定位（Geolocation）

好久前研究过 HTML5 Geolocation，最近整理 F2E-Awesome 的时候，发现缺乏相关的文章，因此按照本身的使用经验整理了此篇文章。

1、应用场景：

附近商家定位；计算行走路程；GPS 导航；

请求一个位置信息，若是用户赞成，浏览器就会返回位置信息，该位置信息是经过支持 HTML5 地理定位功能的底层设备提供给浏览器。位置信息由纬度／经度坐标和一些其余的元数据组成。有了这些位置信息就能够构建引人注意目的位置感知类应用程序。

2、简单示例

 1 window.addEventListener('load',loadDemo,true);
 2 function loadDemo(){
 3     if(navigator.geolocation){
 4         navigator.geolocation.watchPosition(
 5             updateLocation,
 6             handleLocationError,
 7             {maximumAge:20000}
 8         );
 9     }
10 }
11 function updateLocation(position){
12     var latitude = position.coords.latitude;
13     var longitude = position.coords.longitude;
14     var accuracy = position.coords.accuracy;
15     var timestamp = position.timestamp;
16 }

3、兼容性

4、相关 API

MDN

先打印：

两种类型的定位请求API：单次定位请求和重复性的位置更新请求；

三个方法：
1.getCurrentPosition
获取用户当前定位位置，这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。

1 if(navigator.geolocation){
2     navigator.geolocation.watchPosition(
3     updateLocation,
4     handleLocationError,
5     {maximumAge:20000}
6     );
7 }

须要注意的是：有 GPS 的设备可能须要一分钟或更久来获取 GPS 定位，在这种状况下 getCurrentPosition() 会返回低精度数据（基于 IP 的定位或 Wi-Fi 定位）。

2.watchPosition
您能够设定一个回调函数来响应定位数据发生的变动（设备发生了移动，或获取到了更高精度的地理位置信息），它与 getCurrentPosition() 接受相同的参数，但回调函数会被调用屡次。错误回调函数与 getCurrentPosition() 中同样是可选的，也会被屡次调用。

1 var watchID = navigator.geolocation.watchPosition(function(position) {
2   do_something(position.coords.latitude, position.coords.longitude);
3 });

3.clearWatch
watchPosition() 函数会返回一个 ID，惟一地标记该位置监视器。您能够将这个 ID 传给 clearWatch() 函数来中止监视用户位置。

1 navigator.geolocation.clearWatch(watchID);

5、警告

 [Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details. 

在 IOS 10 中，苹果对 webkit 定位权限进行了修改，全部定位请求的页面必须是 https 协议的。若是是非 https 网页，在 http 协议下经过 html5 原生定位接口会返回错误，也就是没法正常定位到用户的具体位置，而已经支持 https 的网站则不会受影响。

经测试，本地 file 文件或者是启动服务器，都会直接返回拒绝服务。

6、定位原理

那么浏览器是如何实现定位的呢，原理又是如何？

1.IP 定位
每一台连上网路的电脑都具备一个独一无二的 IP 位址，经由 IP 位址能够反查出电脑位置，可是结果并不精确，并且很容易到受到 ISP 的 IP 分配机制影响，而形成偏差。

2.GPS 定位
GPS 是咱们最常听到的定位技术，它是利用卫星来定位，能够很精确的侦测到使用者位置。可是要玩 GPS，行动装置必定要有 GPS 模组，并且尽管 GPS 很是精准，仍是会有技术上的局限，好比在侦测位置时，GPS 的感应器要位于视线范围内（line of sight），所以在有不少高楼大厦、或者是障碍物的地方，GPS 反而没有办法运做自如。

3.Wi-Fi 三角测量定位
这个定位技术能够说是为都会区而设的，由于热闹的大都市一般会有很多 Wi-Fi 热点，定位供应商能够根据这些热点的相对位置、距离等创建一个资料库。Wi-Fi 三角测量适用于 GPS 没法渗透的地方，不过缺点是须要常常更新资料库。

4.基地台三角测量定位
借助基地台之间的相对位置，能够定位出用户在哪里，只要你的手机收获得讯号，就能定位。 通常来讲，这四种技术的准确性由高而低分别是：GPS 定位、Wi-Fi 三角测量、基地台三角测量、IP定位。但仍是要视环境而定，好比你到没有 Wi-Fi 热点的地方、或是手机信号很差，定位效果固然也会受影响。

为何浏览器知道你在哪里