地理位置一般是用來描述地理事物的空間關係。通常情況下，用經緯度可以準確地描述地理位置。而通常所說的地理定位也是找到該地理位置的經緯度作爲座標來進行定位的。在PC端，通常使用IP來定位該IP用戶的位置，移動端定位有多種方式，最準確的是GPS。在Web開發中，Geolocation API (地理位置應用程序接口)提供了準確知道瀏覽器用戶當前位置的功能。本節將對Geolocation地理定位進行詳細講解。
Geolocation 簡介
Geolocation API是通過獲取地理位置的經緯度來進行定位的，它封裝了獲取位置的技術細節，開發者不用關心位置信息究竟從何而來，極大地簡化了應用的開發難度。
Geolocation API已經得到大部分PC端的瀏覽器支持。移動Web瀏覽器也能很好地支持Geolocation API。PC端主流瀏覽器對Geolocation的支持情況如表所示。
表 PC 瀏覽器對Geolocation的支持
| IE | Firefox | Safari | Chrome | Opera |
|---|---|---|---|---|
| IE9+ | 支持 | 支持 | 支持 | 支持 |
移動端Web瀏覽器對Geolocation的支持情況如表所示。
表 移動端瀏覽 器對Geolocation的支持
| ios Safari | Android Browser | Opera Mobile | Opera Mini | BlackBerry Webkit |
|---|---|---|---|---|
| 支持 | 支持 | 支持 | 不支持 | 支持 |
從上面兩個表格可以看出Geolocation API的支持情況，隨着技術的更新迭代，Geo-location API的支持情況會更加完善。
獲取當前位置
Geolocation API的使用非常簡單，navigator. geolocation 對象提供了可以公開訪問地理位置的方法，其中navigator爲瀏覽器內置對象。檢測瀏覽器是否支持定位API，只需要CurrentPosition()被調用時會發起一個異步請求，瀏覽器會調用系統底層的硬件(如GPS)來更新當前的位置信息，當信息獲取到之後會在回調函數中傳入position對象。
position對象包含兩個屬性：一個是coords (座標)，它是一個Coordiante對象，包含當前位置信息；另一個是timestamp,表示獲取到位置的時間戳。
coordiante對象包含包括經緯度在內的一系列信息，具體如下:
(1) latitude: 一個十進制表示的緯度座標。
(2) longitude: 一個十進制表示經度的座標。
(3) altitude: 海拔高度(以米爲單位，如果是5,表示精確到5 m範圍)。
(4) accuracy: 當前經緯度信息的精度(以米爲單位)。
(5) altitudeAccuracy: 當前海拔高度的精度。
(6) heading:代表當前設備的朝向，該值是以弧度爲單位，指示了按順時針方向相對於正北的度數(例如: heading 爲270時表示正西方)。
下面通過一個案例來演示如何使用Geolocation API獲取當前位置，代碼如示例所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getMyPosition(){
if(window.navigator.geolocation){
//獲取當前位置..
alert("正在獲取您的位置.");
//如果獲取位置成功，會調用名字爲successPosition 的方法.
navigator.geolocation.getCurrentPosition
(successPosition,errorPosition);
}else{
alert("您當前的瀏覽器不支持..");
}
}
function successPosition(position){
var jd=position.coords.longitude;//經度
var wd=position.coords.latitude; //緯度
alert(jd+","+wd);
}
//如果沒有獲取到位置，就會調用這個方法
function errorPosition(){
alert("獲取位置失敗.");
}
getMyPosition();
</script>
</head>
<body>
</body>
</html>
因爲Geolocation獲取當前定位除了瀏覽器的支持，還需要硬件設備的支持，上述代碼在不支持該操作的設備上的運行。
以上內容演示了Geolocation獲取當前位置的過程，該案例獲取的是當前位置的地理座標，所以位置變化會導致座標變化。
多學一招：監視移動設備的位置變化
下面介紹一個名詞LBS (Location Based Service,基於位置的服務)，它是通過電信移動運營商的無線電通信網絡(如GSM網、CDMA網)或外部定位方式(如GPS)獲取移動終端用戶的位置信息(地理座標，或大地座標)。
在正文中演示的getCurrentPosition()方法只在調用時會得到位置信息，在LBS應用中，檢測用戶位置變化是非常常見的需求。一個做法是通過循環調用的方式去檢測位置變化。
例如，設置了一個10s作爲獲取位置的間隔，這樣做的缺點是:編程人員無法知道用戶當前的速度。如果在飛機高鐵上，10s 可能已經走了很長一段距離，這樣提供給用戶的位置信息可能是延遲的，如果將間隔設置得很短，又會非常耗電、耗能，如果用戶長時間沒動，這些查詢都是無用的。
爲了解決這個問題，Gcolocation 還提供了watchPosition()方法，可以讓系統通知編程人員用戶的位置發生了變化。
watchPosition0方法和getCurrentPosition()方法在調用上類似，但方法功能與getCurrentPosition() 的區別是非常明顯的。調用該函數時會返回一個watchID，這個ID和setnterval()函數返回的ID類似，可以用於清除此次的監視操作。
watchPosition()方法也接受相同的3個參數：success.error回調，以及一個PositionOptions對象。
調用百度地圖
前面介紹了Geolocation API的基本內容，Geolocation API更大的價值在於與GIS (地理信息系統)的結合。要想實現與GIS的結合首先需要一個地圖的數據庫，百度地圖提供了地圖、導航、街景等豐富的地圖數據庫，可以爲用戶所用。
下面通過一個案例來演示如何調用百度2D地圖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no">
<title>Geolocation</title>
<style type="text/css">
html {height: 100%;}
body {height: 100%;margin: 0px; padding: 0px; }
#container {height:100%;}
</style>
</head>
<body>
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude; // 緯度
var longitude =position.coords.longitude; // 經度
/********************/
// container表示注入哪個容器
var map = new BMap.Map("container");
// 把經度緯度傳給百度
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
/****************************/
// 只寫上面三行就可出現地圖了，並且會定位
// 定義好了一個圖片標記
var myIcon =new BMap.Icon(
"http://developer.baidu.com/map/jsdemo/img/fox.gif",
new BMap.Size(300, 157));
// 創建標註
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
});
}
</script>
</body>
</html>
由於IE瀏覽器對百度API的支持情況較好，用IE瀏覽器訪問該頁面就會成功調用百度地圖。
在示例中，首先在第17行代碼中引入百度JavaScript版API。第21~22行代碼獲取當前位置座標。第27行代碼將座標值傳給百度地圖。爲了更明顯地顯示當前位置，在代碼第27~28行定義一個標記，並在第32~34行將標記定位在百度地圖的當前座標上。需要注意的是，由於在實際開發中經度、緯度的值都會加密，所以運行結果中顯示的位置可能與實際位置有偏差，不是錯誤。
調用完2D地圖後，看一下百度的全景圖。爲了可以在普通PC上演示該功能，在調用全景圖這個案例中，使用固定經緯度來模擬獲取當前位置。
下面通過一個案例來演示如何使用Geolocation API來調用百度地圖的全景圖。
<!DOCTYPE html>
<html>
<head>
<title>全景圖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=4qXTGvclMqTZXkLsU3twnMA7">
</script>
<style type="text/css">
body, html{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
font-family:"微軟雅黑";
}
#panorama {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script type="text/javascript">
var jd="116.349902";
var wd="40.065817";
//全景圖展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(jd, wd)); //根據經緯度座標展示全景圖
panorama.setPov({heading: -40, pitch: 6});
//全景圖位置改變後，普通地圖中心點也隨之改變
panorama.addEventListener('position_changed', function(e){
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
</script>
</body>
</html>
用瀏覽器打開示例，在示例中，在30、31行代碼指定經緯度。第37~40行爲全景圖展示代碼，該段代碼爲固定寫法，讀者只需替換經緯度即可。Mac 機讀者可以嘗試獲取當前位置再進行全景圖調用。
超全面的測試IT技術課程，0元立即加入學習！有需要的朋友戳：
騰訊課堂測試技術學習地址
歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。