定位基準

說到地理坐標，一定是有一個定位的基準的。在web開發的過程中，它的定位基準一共有那么幾種：

第一種是IP，根據當前電腦或者是手機設備它的IP地址來確定當前的地理坐標。IP定位是通過ISP機房，也就是每一個登記的機房位置，比如小區，每一棟大樓都會有一個登記的ISP機房。如果使用IP定位的話，它大約能夠精確到小區或者是大樓級別，比如一棟和二棟通過這個IP地址就能準確的區分出來。IP定位的誤差大概在十幾米。

第二種是GPS，GPS是基于衛星定位的，它相對來說是比較準確的，但是它需要硬件支持。比如電腦一般是不具備GPS定位功能的。它的精確度很高，如果是軍方的話可以達到1米甚至以內。

第三種WIFI定位，WiFi定位是通過每一個WiFi地址的mac地址，特別精確。如果WiFi有登記過的話，它的誤差大概在一米左右。WiFi是有一個信號輻射范圍的，根據輻射范圍的強弱可以確定當前的設備距離這個WiFi有多遠。但是它的支持性能不是太好，只能支持室內。

第四種GSM和CDMA是比較常見的，是使用手機卡來定位的，也就是基于設備的基站。比如聯通的信號塔電信的信號塔，它的精確度也是比較高的，它一般是用于手機或者是通信設備。不同的信號塔會接到來自不同方位的信號，然后根據這個信號的疊加和它的強弱再來確定當前的位置，它的精確度可以達到10米左右。

最后一種是用戶指定，可以手動指定當前的位置，假如當前定位不準，我們需要做一個校正指定當前的位置，最常見的就是我們平常使用打車軟件時，如果自動獲取的位置不準，那么我們可以通過移動來手動指定我們當前的位置。

2：獲取流程

獲取定位基準之后，我們需要獲取當前的地理坐標，獲取是有一個流程的。首先打開web應用，打開之后向瀏覽器請求地理信息，這時會彈出一個詢問窗口，由于位置信息涉及到一個隱私，所以瀏覽器做了一個雙重的保護，詢問之后如果同意了，這時瀏覽器就會從設備或者受信任的服務器獲取位置信息并返回。

3：瀏覽器兼容

browser_map

4：獲取用戶當前坐標（地理坐標到底是怎么獲取的）

getCurrentPosition（onSuccess，onError，options）

onSuccess是一個回調函數，options有三個值：enableHighAccuracy（高精度標識，在設備或者是服務器能達到范圍內返回最高精度）、timeout（超出時間，如果在指定時間內獲取不到位置信息就會返回Error，默認是0（無窮大））、maximumAge（緩存時間）。

const getLocation = () => {
 const options = {
 enableHighAccuracy: false, 
 maximumAge: 1000
 }
 if(navigator.geolocation) {
 //瀏覽器支持geolocation
 navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
 } else {
 //瀏覽器不支持geolocation
 alert('當前瀏覽器不支持getLocation');
 }
}
?
//成功回調
function onSuccess(position) {
 const longitude = position.coords.longitude;
 //緯度
 const latitude = position.coords.latitude;
 console.log('position', { longitude, latitude });
}
?
//失敗回調
function onError(error) {
 switch(error.code){
 case 1:
 alert("位置服務被拒絕");
 break;
 case 2:
 alert("暫時獲取不到位置信息");
 break;
 case 3:
 alert("獲取信息超時");
 break;
 case 4:
 alert("未知錯誤");
 break;
 }
}

5：持續獲取用戶當前位置(科學上網)

watchCurrentPosition(onSuccess, onError, options);

let watchId = undefined;
?
const getLocation = () => {
 const options = {
 enableHighAccuracy: false, 
 maximumAge: 1000
 }
 if(navigator.geolocation) {
 //瀏覽器支持geolocation
 watchId = navigator.geolocation.watchPosition(showPosition);
 } else {
 //瀏覽器不支持geolocation
 alert('當前瀏覽器不支持getLocation');
 }
}
?
function showPosition(position) {
 const longitude = position.coords.longitude;
 const latitude = position.coords.latitude;
 console.log('position', { longitude, latitude });
}
?
const cancel = () => {
 //清除當前持續獲取當前位置，可以當做是一個setInterval
 if(watchId) navigator.geolocation.clearWatch(watchId);
}