HTML 5提供了地理位置等一系列API可以給用戶使用，方便用戶制作LBS的地理應(yīng)用，首先在支持HTML 5的瀏覽器中，當(dāng)開啟API時，會詢問是否用戶同意使用api，否則不會開啟的，保證安全

地理位置定位的幾種方式：IP地址，GPS，Wifi，GSM/CDMA

地理位置獲取流程：

1、用戶打開需要獲取地理位置的web應(yīng)用。

2、應(yīng)用向瀏覽器請求地理位置，瀏覽器彈出詢問，詢問用戶是否共享地理位置。

3、假設(shè)用戶允許，瀏覽器從設(shè)別查詢相關(guān)信息。

4、瀏覽器將相關(guān)信息發(fā)送到一個信任的位置服務(wù)器，服務(wù)器返回具體的地理位置。

HTML5地理地位的實現(xiàn)：

1. 實現(xiàn)基于瀏覽器（無需后端支持）獲取用戶的地理位置技術(shù)

2. 精確定位用戶的地理位置( 精度最高達10m之內(nèi)，依賴設(shè)備 )

3. 持續(xù)追蹤用戶的地理位置

4. 與 Google Map、或者 Baidu Map 交互呈現(xiàn)位置信息

Geolocation API 用于將用戶當(dāng)前地理位置信息共享給信任的站點，這涉及用戶的隱私安全問題，所以當(dāng)一個站點需要獲取用戶的當(dāng)前地理位置，瀏覽器會提示用戶是“允許” or “拒絕”。

先看看哪些瀏覽器支持Geolocation API：

IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+

Geolocation API存在于navigator對象中，只包含3個方法：

代碼如下:

1、getCurrentPosition //當(dāng)前位置

2、watchPosition //監(jiān)視位置

3、clearWatch //清除監(jiān)視

navigator.geolocation.getCurrentPosition( … , function(error){

switch(error.code){

case error.TIMEOUT :

alert( " 連接超時，請重試 " );

break;

case error.PERMISSION_DENIED :

alert( " 您拒絕了使用位置共享服務(wù)，查詢已取消 " );

break;

case error.POSITION_UNAVAILABLE :

alert( " ，抱歉，暫時無法為您所在的星球提供位置服務(wù) " );

break;

}

});

watchPosition像一個追蹤器與clearWatch成對。

watchPosition與clearWatch有點像setInterval和clearInterval的工作方式。

var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);

navigator.geolocation.clearWatch(watchPositionId );

HTML 5提供了地理位置等一系列API可以給用戶使用，方便用戶制作LBS的地理應(yīng)用，首先在支持HTML 5的瀏覽器中，當(dāng)開啟API時，會詢問是否用戶同意使用api，否則不會開啟的，保證安全。

1、開啟，判斷是否瀏覽器支持LBS api

代碼如下:

function isGeolocationAPIAvailable()

{

var location = "No, Geolocation is not supported by this browser.";

if (window.navigator.geolocation) {

location = "Yes, Geolocation is supported by this browser.";

}

alert(location);

}

上面的例子中，還在displayError方法中，捕捉了異常；

2、獲得用戶的地理位置

這個使用getCurrentPosition就可以了；

代碼如下:

function requestPosition() {

if (nav == null) {

nav = window.navigator;

}

if (nav != null) {

var geoloc = nav.geolocation;

if (geoloc != null) {

geoloc.getCurrentPosition(successCallback);

}

else {

alert("Geolocation API is not supported in your browser");

}

}

else {

alert("Navigator is not found");

}

}

當(dāng)獲得地理位置成功后，會產(chǎn)生一個回調(diào)方法了，處理返回的結(jié)果，

代碼如下:

function setLocation(val, e) {

document.getElementById(e).value = val;

}

function successCallback(position)

{

setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude");

}

3、一個很常見的問題，是如何跟蹤用戶不斷變化的地理位置，這里小結(jié)下其中用到的兩個api

1 watchPosition

例子如下：

代碼如下:

function listenForPositionUpdates() {

if (nav == null) {

nav = window.navigator;

}

if (nav != null) {

var geoloc = nav.geolocation;

if (geoloc != null) {

watchID = geoloc.watchPosition(successCallback);

} else {

alert("Geolocation API is not supported in your browser");

}

} else {

alert("Navigator is not found");

}

}

然后在successCallback中，就可以設(shè)置顯示最新的地理位置：

代碼如下:

function successCallback(position){

setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude");

}

如果不希望實時跟蹤，則可以取消之：

function clearWatch(watchID) {

window.navigator.geolocation.clearWatch(watchID);

}

4、如何處理異常

當(dāng)遇到異常時，可以捕捉之：

代碼如下:

if (geoloc != null) {

geoloc.getCurrentPosition(successCallback, errorCallback);

}

function errorCallback(error) {

var message = "";

switch (error.code) {

case error.PERMISSION_DENIED:

message = "This website does not have permission to use "

+ "the Geolocation API";

break;

case error.POSITION_UNAVAILABLE:

message = "The current position could not be determined.";

break;

case error.PERMISSION_DENIED_TIMEOUT:

message = "The current position could not be determined "

+ "within the specified timeout period.";

break;

}

if (message == "") {

var strErrorCode = error.code.toString();

message = "The position could not be determined due to "

+ "an unknown error (Code: " + strErrorCode + ").";

}

alert(message);

}

5、 在google 地圖上顯示位置（前提是有g(shù)oogle map api等設(shè)置好）

代碼如下:

function getCurrentLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showMyPosition,showError);

}

else

{

alert("No, Geolocation API is not supported by this browser.");

}

}

function showMyPosition(position)

{

var coordinates=position.coords.latitude+","+position.coords.longitude;

var map_url="http://maps.googleapis.com/maps/api/staticmap?center="

+coordinates+"&zoom=14&size=300x300&sensor=false";

document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />";

}

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED:

alert("This website does not have permission to use the Geolocation API")

break;

case error.POSITION_UNAVAILABLE:

alert("The current position could not be determined.")

break;

case error.TIMEOUT:

alert("The current position could not be determined within the specified time out period.")

break;

case error.UNKNOWN_ERROR:

alert("The position could not be determined due to an unknown error.")

break;

}

}