位基準

說到地理坐標，一定是有一個定位的基準的。在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 - 響應的日期/時間

.獲取元素在文檔上的坐標

function DocuemntHtmlPageXY (elem) {
 var rect=elem.getBoundingClientRect();
 var scrollTop=window.scrollTop || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;
 var scrollLeft=window.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft || 0;
 var html=document.documentElement || document.getElementsByTagName_r('html')[0];
 //修復ie6 7 下的瀏覽器邊框也被算在 boundingClientRect 內的 bug
 var deviation=html.getBoundingClientRect();
 //修復 ie8 返回 -2 的 bug
 deviation={ //FF 不允許修改返回的對象
 left: deviation.left < 0 ? 0 : deviation.left,
 top: deviation.top < 0 ? 0 : deviation.top
 };
 return {
 left: rect.left + scrollLeft - deviation.left,
 top: rect.top + scrollTop - deviation.top
 };
 }

2.舉例如下：