html5中地理位置定位api接口開發應用小結

2024-08-26 00:15:06

字體：大中小

來源：轉載

供稿：網友

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

地理位置獲取流程：
1、用戶打開需要獲取地理位置的web應用。
2、應用向瀏覽器請求地理位置，瀏覽器彈出詢問，詢問用戶是否共享地理位置。
3、假設用戶允許，瀏覽器從設別查詢相關信息。
4、瀏覽器將相關信息發送到一個信任的位置服務器，服務器返回具體的地理位置。

HTML5地理地位的實現：
1. 實現基于瀏覽器（無需后端支持）獲取用戶的地理位置技術
2. 精確定位用戶的地理位置( 精度最高達10m之內，依賴設備 )
3. 持續追蹤用戶的地理位置
4. 與 Google Map、或者 Baidu Map 交互呈現位置信息

Geolocation API 用于將用戶當前地理位置信息共享給信任的站點，這涉及用戶的隱私安全問題，所以當一個站點需要獲取用戶的當前地理位置，瀏覽器會提示用戶是“允許” or “拒絕”。
先看看哪些瀏覽器支持Geolocation API：
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
Geolocation API存在于navigator對象中，只包含3個方法：

復制代碼代碼如下:www.CuoXIn.com

 
1、getCurrentPosition //當前位置 
2、watchPosition //監視位置 
3、clearWatch //清除監視 
navigator.geolocation.getCurrentPosition( … , function(error){ 
switch(error.code){ 
case error.TIMEOUT : 
alert( " 連接超時，請重試 " ); 
break; 
case error.PERMISSION_DENIED : 
alert( " 您拒絕了使用位置共享服務，查詢已取消 " ); 
break; 
case error.POSITION_UNAVAILABLE : 
alert( " ，抱歉，暫時無法為您所在的星球提供位置服務 " ); 
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的地理應用，首先在支持HTML 5的瀏覽器中，當開啟API時，會詢問是否用戶同意使用api，否則不會開啟的，保證安全。
1、開啟，判斷是否瀏覽器支持LBS api

復制代碼代碼如下:www.CuoXIn.com

 
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就可以了；

復制代碼代碼如下:www.CuoXIn.com

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

當獲得地理位置成功后，會產生一個回調方法了，處理返回的結果，

復制代碼代碼如下:www.CuoXIn.com

 
function setLocation(val, e) { 
document.getElementById(e).value = val; 
} 
function successCallback(position) 
{ 
setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude"); 
} 

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

復制代碼代碼如下:www.CuoXIn.com

 
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中，就可以設置顯示最新的地理位置：

復制代碼代碼如下:www.CuoXIn.com

 
function successCallback(position){ 
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude"); 
} 

如果不希望實時跟蹤，則可以取消之：
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
4、如何處理異常
當遇到異常時，可以捕捉之：

復制代碼代碼如下:www.CuoXIn.com

 
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 地圖上顯示位置（前提是有google map api等設置好）

復制代碼代碼如下:www.CuoXIn.com

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