地理位置一般是用來描述地理事物的空間關係。通常情況下，用經緯度可以準確地描述地理位置。而通常所說的地理定位也是找到該地理位置的經緯度作為座標來進行定位的。在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>

<head>

<title>Title</title>

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>

<head>

user-scalable=no">

<title>Geolocation</title>

html {height: 100%;}

body {height: 100%;margin: 0px; padding: 0px; }

#container {height:100%;}

</style>

</head>

<body>

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>

src="4qXTGvclMqTZXkLsU3twnMA7">

</script>

body, html{

width: 100%;

height: 100%;

overflow: hidden;

margin:0;

font-family:"微軟雅黑";

}

#panorama {

height: 100%;

width: 100%;

overflow: hidden;

}

</style>

</head>

<body>

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 機讀者可以嘗試獲取當前位置再進行全景圖呼叫

基於HTML5的移動Web應用——Geolocation地理定位

相關文章