突襲HTML5之Javascript API擴充2—地理資訊服務及地理位置API學習_html5教學技巧

現在比較火的一類服務叫做基於位置的服務(location-based service， LBS)，這一類服務就是企業利用某點(例如用戶所在的位置)坐標附近的區域提供服務的信息，比如常見的地圖相關服務。在HTML5中，加入了新的地理位置API用來決定和分享地理位置。
隱私權申明
在與遠端Web伺服器共享實體位置時，隱私權是需要關注的問題。因此，地理位置API會要求使用者先提供權限，然後Web應用程式才能存取位置資訊。首次造訪要求地理位置資料的網頁時，瀏覽器會顯示通知欄，提示提供使用者位置的存取權。依照瀏覽器的提示，選擇相關的授權即可。
如果使用者未授予權限，則不會向 Web 應用程式提供位置資訊。呼叫相關API不會觸發成功回調。
檢查瀏覽器的支援情況
地理位置API在主流的瀏覽器的最新版中都支援了，但是為了相容於舊的瀏覽器，還是要檢查一下。如果地理位置API 不可用，則window.navigator.geolocation 將為null，如下所示：

複製程式碼

複製程式碼

複製程式碼



複製程式碼

複製程式碼

程式碼如下:

function show_islocationenabled()

{ var str = "No, geolocation is not supported."; if (window.navigator.geolo) {🎜>if (window.navigator.geolo) {🎜>if (window.navigator.geolo) {🎜>if (window.navigator.geolo); >str = "Yes, geolocation is supported."; } alert( str );

}

Geolocation API基於navigator這一全域物件的一個新屬性： navigator.geolocation，該物件提供了一些關於訪客的瀏覽器和系統的有用資訊。 Geolocation的資訊可以透過許多手段取得：例如基地台、web的資料庫或是GPS等。使用不同的方式取得到的Geolocation資訊精確度也是不一樣的，通常情況下，透過GPS獲得的最為準確(行動平台上使用GPS最多，PC平台上基本上都是靠網路資料)。偶然情況下，在某些位置上，你有可能無法獲得明確的地理位置讀數或一點資料都接收不到。

定位目前位置

　　使用navigator.geolocation的getCurrentPosition()方法取得使用者目前的位置，此方法只取得一次位置的資訊。當方法被腳本呼叫時，方法以非同步的方式來嘗試取得宿主設備的目前位置。

複製程式碼

程式碼如下: 方法簽章：getCurrentCallworwoo ,geolocationOptions])；位置選項(可選的)

處理位置資訊
getCurrentPositon()方法取得目前位置成功後會將位置資訊儲存到一個Position物件中，然後把這個物件當作參數來執行geolocationSuccessCallback此回檔。在這個回呼函數中，你可以任意處置這個物件中包含的資訊。
Position物件有兩個屬性：timestamp和coords。 timestamp屬性表示地理位置資料的建立時間，coords屬性表示地理位置訊息，又包含七個屬性：





複製程式碼

複製程式碼複製程式碼複製程式碼代碼如下: . coords.latitude：估計緯度. coords.longitude：估計經度. coords.accitude：估計高度. coords.accitude：估計高度. coords.altitudeAccuracy：所提供的以米為單位的高度估計的精確度. coords.heading： 宿主設備當前移動的角度方向，相對於正北方向順時針計算. coords.speed：以米每秒為單位的設備的當前對地速度
一般的，這些屬性中有三項是保證有的：coords.latitude、coords.longitude和coords.accuracy，其餘的返回null；這取決於設備的能力和其所採用的後端定位伺服器。而且，heading和speed屬性可以基於使用者之前的位置計算出來。
處理錯誤
執行getCurrentPositon()方法時如果有錯誤發生的話，則該方法傳遞一個PositionError物件給geolocationErrorCallback回呼。
設置地理位置選項
你可以設置geolocationOptions的三個屬性：

複製代碼

代碼如下:

enableHighAccuracy:如果設備支援高精度的話，這個選項表示是否啟用高精度。
timeout:查詢逾時時間
maximumAge: 快取的位置最大的時間數，在這一時間段內快取可用。

看下面完整的範例：

複製程式碼

複製程式碼

複製程式碼


程式碼

Click the button to get your position:

Try It

<script> <br />var x=document.getElementById("demo") ; <br />function getLocation() { <br />if (navigator.geolocation){ <br />navigator.geolocation.getCurrentPosition(showPosition,showError); <br />} <br />else{ <<; Geolocation is not supported by this browser."; <br />} <br />} <br />function showPosition(position) { <br />var latlon=position.coords.latitude "," position.coords.longitude < var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" <br />latlon "&zoom=9&size=400x300&sensor=false"; <br />document.getElementById("mapholder").innerHTMLer").innerHTMLer"). ="<img src='" img_url "' / alt="突襲HTML5之Javascript API擴充2—地理資訊服務及地理位置API學習_html5教學技巧" >"; <br />} <br />function showError(error) { <br />switch(error.code) { <br />case error.PERMISSION_DENIED: <br /> .innerHTML="User denied the request for Geolocation." <br />break; <br />case error.POSITION_UNAVAILABLE: <br />x.innerHTML="Location information is unavailable." <br />x.innerHTML="Location information is unavailable." <br />break; TIMEOUT: <br />x.innerHTML="The request to get user location timed out." <br />break; <br />case error.UNKNOWN_ERROR: <br />x.innerHTML="An unknown error occurred: <br />x.innerHTML="An unknown error occurred>" break; <br />} </script>

}



這個範例取得到目前裝置所在的地理位置並顯示到Google地圖。當然你可以使用百度地圖API中的靜態圖版來改造這個範例。百度地圖API參看後面的實用參考中的連結。

開啟/取消持續定位

使用navigator.geolocation的watchPosition()方法可以定期輪詢使用者的位置，查看使用者的位置是否改變。這個方法有三個參數：這三個參數和getCurrentPosition()方法一樣，一個成功後的回調，一個失敗後的回調，和一個獲取位置資訊的選項；這個方法有一個傳回值watchID，用來取消持續定位。

使用navigator.geolocation的clearWatch()方法可以終止正在進行的watchPosition()，該方法只帶一個參數watchID。 看下面的範例：

複製程式碼程式碼如下:

function setText(val, e) {
document.getElementById(e).value = val;
}
var nav = null;
var watchID;
function ListenForPositionUpdates() {
if (nav == null) {
nav = window.navigator;
}
if(navigator; nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
watchID = geoloc.watchPosition(successCallback);
}
}

>alert("不支援地理位置");
}
}
else {
alert("找不到導覽器");
}
}
函數clearWatch (watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
函數successCallback(位置)
{
setText(position.coords.latitude, "緯度");
setText(position.coords.longitude, "經度");
}
腳本>
頭>

緯度：

經度：

>
>
身體>

實用參考：
官方文件：http://www.w3schools .com/html5/html5_geolocation.asp
腳本之家：http://www.jb51.net/w3school/html5/
微軟幫助：http:/ /msdn.microsoft.com/zh-cn/library/gg589502(v =vs.85
)百度地圖API：http://dev.baidu.com/wiki/static/index. htm