html5中地理位置定位api介面開發應用小結_html5教學技巧

地理位置定位的幾種方式：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個方法：

複製代碼

代碼如下:

1、getCurrentPosition //目前位置
2、watchPosition //監視位置
3、clearWatch //清除監視
navigator.geolocation.getCurrentPosition( … , function(error){
switch(error>switch(error>switch(error>switch(error>switch(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(地理位置PositionId );
navigator.geolocation.clearWatch(PositionId );
HTML1、開啟，判斷是否瀏覽器支援LBS api

複製程式碼

複製程式碼

複製程式碼



複製碼如下:

function isGeolocationAPIAvailable()
{
var location = "No, Geolocation is not supported by this browser."; if (windownav) {igator. 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"); } }

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

複製程式碼


程式碼如下:

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 範例如下： 複製程式碼程式碼如下:

function listenForPositionUpdates() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null ) {
var geoloc = nav.geolocation;
if (geoloc != null) {
watchID = geoloc.watchPosition(successCallback);
} else {
alert2"Ge not supported in your browser");
}
} else {
alert("Navigator is not found");
}
}

}
}

然後在successCallback中，就可以設置顯示最新的地理位置：

複製代碼

代碼如下:

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


如果不希望即時追蹤，可以取消之： function clearWatch(watchID) { window.navigator.geolocation.clearWatch(watchID);
}

4、如何處理異常

當遇到異常時，可以捕捉：

複製程式碼

複製程式碼


程式碼>

if (geoloc != null) {
geoloc.getCurrentPosition(successCallback, errorCallback);
}
function errorCallback(error);
}
function errorCallback(error) { <.>switch (error.code) {
case error.PERMISSION_DENIED:
message = "This website does not have permission to use "
"the Geolocation API";
; error.POSITION_UNAVAILABLE:
message = "The current position could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
case error.PERMISSION_DENIED_TIME/ "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); }
}
alert(message);

}

^ >5、 在google 地圖上顯示位置（前提是有google map api等設定好）

複製程式碼



複製程式碼


程式碼如下:


function getCurrentLocation()
{
if (navigator.geolocation)
{
navigator.geolo. );
}
else
{
alert("No, Geolocation API is not supported by this browser.");
}
}
function showPMyosition(unction)
{
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=""; showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("This website does not have permission to use the Geopermission >break;
case error.POSITION_UNAVAILABLE:
alert("The current position could not be determined.")
break;
case error.TIMEOUT:
break;

case error.TIMEOUT: alert"The cur> 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."); } }