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 熱點的地方、或是手機信號很差，定位效果固然也會受影響。

爲何瀏覽器知道你在哪裏