HTML地理座標

1：定位基準

說到地理座標，一定是有一個定位的基準的。在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：瀏覽器兼容

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);
    }

6：coords

• coords.latitude - 十進制數的緯度
• coords.longitude - 十進制數的經度
• coords.accuracy - 位置精度
• coords.altitude - 海拔，海平面以上以米計
• coords.altitudeAccuracy - 位置的海拔精度
• coords.heading - 方向，從正北開始以度計
• coords.speed - 速度，以米/每秒計
• timestamp - 響應的日期/時間