DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> 突襲HTML5之Javascript API擴展2—地理信息服務及地理位置API學習
突襲HTML5之Javascript API擴展2—地理信息服務及地理位置API學習
編輯:HTML5詳解     
現在比較火的一類服務叫做基於位置的服務(location-based service, LBS),這一類服務就是企業利用某點(例如用戶所在的位置)坐標附近的區域提供服務的信息,比如常見的地圖相關服務。在Html5中,加入了新的地理位置API用來確定和分享地理位置。 
隱私申明 
在與遠程Web服務器共享物理位置時,隱私是一個需要關注的問題。因此,地理位置API會要求用戶先提供權限,然後Web應用程序才能訪問位置信息。首次訪問請求地理位置數據的網頁時,浏覽器將顯示一個通知欄,提示提供對用戶位置的訪問權限。按照浏覽器的提示,選擇相關的授權即可。 
如果用戶未授予權限,則不會向 Web 應用程序提供位置信息。調用相關API不會觸發成功回調。 
檢查浏覽器的支持情況 
地理位置API在主流的浏覽器的最新版中都支持了,但是為了兼容老的浏覽器,還是要檢查一下。如果地理位置 API 不可用,則 window.navigator.geolocation 將為 null,如下所示: 

復制代碼代碼如下:www.mb5u.com
function show_islocationenabled() 

var str = "No, geolocation is not supported."; 
if (window.navigator.geolocation) { 
str = "Yes, geolocation is supported."; 

alert( str ); 


Geolocation API基於navigator這一全局對象的一個新屬性:navigator.geolocation,該對象提供了一些關於訪問者的浏覽器和系統的有用信息。Geolocation的信息可以通過許多手段獲得:比如基站、web的數據庫或是GPS等。使用不同的方式獲取到的Geolocation信息精度也是不一樣的,通常情況下,通過GPS獲得的最為准確(移動平台上使用GPS最多,PC平台上基本都是靠網絡數據)。偶然情況下,在一些位置上,你有可能不能獲得明確的地理位置讀數或是一點數據都接收不到。 
定位當前位置 
  使用navigator.geolocation的getCurrentPosition()方法獲取用戶的當前位置,這個方法只獲取一次位置的信息。當該方法被腳本調用時,方法以異步的方式來嘗試獲取宿主設備的當前位置。 

復制代碼代碼如下:www.mb5u.com
方法簽名:getCurrentPosition(geolocationSuccessCallback,[geolocationErrorCallback,geolocationOptions]); 
  1. geolocationSuccessCallback:獲取當前位置成功後的回調(必需的) 
  2. geolocationErrorCallback. 有錯誤發生時使用的回調(可選的) 
  3. geolocationOptions. 地理位置選項(可選的) 

處理位置信息 
getCurrentPositon()方法獲得當前位置成功後會將位置信息保存到一個Position對象中,然後把這個對象作為參數來執行geolocationSuccessCallback這一回調。在這個回調函數中,你可以任意處置這個對象中包含的信息。 
Position對象有兩個屬性:timestamp和coords。timestamp屬性表示地理位置數據的創建時間,coords屬性表示地理位置信息,又包含七個屬性: 

復制代碼代碼如下:www.mb5u.com
. coords.latitude:估計緯度 
. coords.longitude:估計經度 
. coords.altitude:估計高度 
. coords.accuracy:所提供的以米為單位的經度和緯度估計的精確度 
. coords.altitudeAccuracy:所提供的以米為單位的高度估計的精確度 
. coords.heading: 宿主設備當前移動的角度方向,相對於正北方向順時針計算 
. coords.speed:以米每秒為單位的設備的當前對地速度 

一般的,這些屬性中有三項是保證有的:coords.latitude、coords.longitude和coords.accuracy,其余的返回null;這取決於設備的能力和其所采用的後端定位服務器。而且,heading和speed屬性可以基於用戶之前的位置計算出來。 
處理錯誤 
執行getCurrentPositon()方法時如果有錯誤發生的話,則該方法傳遞一個PositionError對象給geolocationErrorCallback回調。 
設置地理位置選項 
你可以設置geolocationOptions的三個屬性: 

復制代碼代碼如下:www.mb5u.com
enableHighAccuracy:如果設備支持高精度的話,這個選項表示是否啟用高精度。 
timeout:查詢超時時間 
maximumAge: 緩存的位置最大的時間數,在這一時間段內緩存可被使用。 

看下面完整的例子: 

復制代碼代碼如下:www.mb5u.com
<!DOCTYPE Html> 
<Html> 
<body> 
<p id="demo">Click the button to get your position:</p> 
<button onclick="getLocation()">Try It</button> 
<div id="mapholder"></div> 
<script> 
var x=document.getElementById("demo"); 
function getLocation() { 
if (navigator.geolocation){ 
navigator.geolocation.getCurrentPosition(showPosition,showError); 

else{ 
x.innerHtml="Geolocation is not supported by this browser."; 


function showPosition(position) { 
var latlon=position.coords.latitude+","+position.coords.longitude; 
var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" + 
latlon + "&zoom=9&size=400x300&sensor=false"; 
document.getElementById("mapholder").innerHtml="<img src='"+img_url+"' />"; 

function showError(error) { 
switch(error.code) { 
case error.PERMISSION_DENIED: 
x.innerHtml="User denIEd the request for Geolocation." 
break; 
case error.POSITION_UNAVAILABLE: 
x.innerHtml="Location information is unavailable." 
break; 
case error.TIMEOUT: 
x.innerHtml="The request to get user location timed out." 
break; 
case error.UNKNOWN_ERROR: 
x.innerHtml="An unknown error occurred." 
break; 


</script> 
</body> 
</Html> 

這個例子獲取到當前設備所在的地理位置並顯示到Google地圖中。當然你可以使用百度地圖API中的靜態圖版來改造這個例子。百度地圖API參看後面的實用參考中的鏈接。 
開啟/取消持續定位 
使用navigator.geolocation的watchPosition()方法可以定期輪詢用戶的位置,查看用戶的位置是否發生改變。這個方法有三個參數:這三個參數和getCurrentPosition()方法一樣,一個成功後的回調,一個失敗後的回調,和一個獲取位置信息的選項;這個方法有一個返回值watchID,用於取消持續定位。 
使用navigator.geolocation的clearWatch()方法可以終止正在進行的watchPosition(),該方法只帶一個參數watchID。 
看下面的例子: 

復制代碼代碼如下:www.mb5u.com
<!DOCTYPE Html> 
<Html> 
<head> 
<title>Geolocation API Example: Listening for Location Updates</title> 
<meta http-equiv="X-UA-Compatible" content="IE=9" /> 
<script type="text/Javascript"> 
function setText(val, e) { 
document.getElementById(e).value = val; 

var nav = null; 
var watchID; 
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 not supported"); 


else { 
alert("Navigator not found"); 


function clearWatch(watchID) { 
window.navigator.geolocation.clearWatch(watchID); 

function successCallback(position) 

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

</script> 
</head> 
<body> 
<label for="latitude">Latitude: </label><input id="latitude" /> 

<label for="longitude">Longitude: </label><input id="longitude" /> 

<input type="button" value="Watch Latitude and Longitude" onclick="listenForPositionUpdates()" /> 
<input type="button" value="Clear watch" onclick="clearWatch()" /> 
</body> 
</Html> 

實用參考:
官方文檔:http://www.w3schools.com/Html5/Html5_geolocation.ASP
模板無憂:http://www.mb5u.com/w3school/Html5/
微軟幫助:http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
百度地圖API:http://dev.baidu.com/wiki/static/index.htm
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved