突襲HTML5之Javascript API擴展2—地理信息服務及地理位置API學習_HTML5教程

推薦：html5新增的屬性和廢除的屬性簡要概述
HTML5中，在新增加和廢除很多元素的同時，也增加和廢除了很多屬性比如表單相關的屬性/鏈接相關屬性是新增的而HTML4中一些屬性就被廢除掉了，感興趣的你可以了解下，或許對你學習html5有所幫助

現(xiàn)在比較火的一類服務叫做基于位置的服務(location-based service， LBS)，這一類服務就是企業(yè)利用某點(例如用戶所在的位置)坐標附近的區(qū)域提供服務的信息，比如常見的地圖相關服務。在HTML5中，加入了新的地理位置API用來確定和分享地理位置。
隱私申明
在與遠程Web服務器共享物理位置時，隱私是一個需要關注的問題。因此，地理位置API會要求用戶先提供權限，然后Web應用程序才能訪問位置信息。首次訪問請求地理位置數(shù)據(jù)的網(wǎng)頁時，瀏覽器將顯示一個通知欄，提示提供對用戶位置的訪問權限。按照瀏覽器的提示，選擇相關的授權即可。
如果用戶未授予權限，則不會向 Web 應用程序提供位置信息。調用相關API不會觸發(fā)成功回調。
檢查瀏覽器的支持情況
地理位置API在主流的瀏覽器的最新版中都支持了，但是為了兼容老的瀏覽器，還是要檢查一下。如果地理位置 API 不可用，則 window.navigator.geolocation 將為 null，如下所示：

復制代碼代碼如下:www.wf0088.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，該對象提供了一些關于訪問者的瀏覽器和系統(tǒng)的有用信息。Geolocation的信息可以通過許多手段獲得：比如基站、web的數(shù)據(jù)庫或是GPS等。使用不同的方式獲取到的Geolocation信息精度也是不一樣的，通常情況下，通過GPS獲得的最為準確(移動平臺上使用GPS最多，PC平臺上基本都是靠網(wǎng)絡數(shù)據(jù))。偶然情況下，在一些位置上，你有可能不能獲得明確的地理位置讀數(shù)或是一點數(shù)據(jù)都接收不到。
定位當前位置
　　使用navigator.geolocation的getCurrentPosition()方法獲取用戶的當前位置，這個方法只獲取一次位置的信息。當該方法被腳本調用時，方法以異步的方式來嘗試獲取宿主設備的當前位置。

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

 
方法簽名：getCurrentPosition(geolocationSuccessCallback,[geolocationErrorCallback,geolocationOptions]); 
　　1. geolocationSuccessCallback：獲取當前位置成功后的回調(必需的) 
　　2. geolocationErrorCallback. 有錯誤發(fā)生時使用的回調(可選的) 
　　3. geolocationOptions. 地理位置選項(可選的) 

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

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

 
. coords.latitude：估計緯度 
. coords.longitude：估計經(jīng)度 
. coords.altitude：估計高度 
. coords.accuracy：所提供的以米為單位的經(jīng)度和緯度估計的精確度 
. coords.altitudeAccuracy：所提供的以米為單位的高度估計的精確度 
. coords.heading： 宿主設備當前移動的角度方向，相對于正北方向順時針計算 
. coords.speed：以米每秒為單位的設備的當前對地速度 

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

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

 
enableHighAccuracy:如果設備支持高精度的話，這個選項表示是否啟用高精度。 
timeout:查詢超時時間 
maximumAge: 緩存的位置最大的時間數(shù)，在這一時間段內緩存可被使用。 

看下面完整的例子：

復制代碼代碼如下:www.wf0088.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中的靜態(tài)圖版來改造這個例子。百度地圖API參看后面的實用參考中的鏈接。
開啟/取消持續(xù)定位
使用navigator.geolocation的watchPosition()方法可以定期輪詢用戶的位置，查看用戶的位置是否發(fā)生改變。這個方法有三個參數(shù)：這三個參數(shù)和getCurrentPosition()方法一樣，一個成功后的回調，一個失敗后的回調，和一個獲取位置信息的選項；這個方法有一個返回值watchID，用于取消持續(xù)定位。
使用navigator.geolocation的clearWatch()方法可以終止正在進行的watchPosition()，該方法只帶一個參數(shù)watchID。
看下面的例子：

復制代碼代碼如下:www.wf0088.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.wf0088.com/w3school/html5/
微軟幫助：http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
百度地圖API：http://dev.baidu.com/wiki/static/index.htm

分享：如何讓IE9以下版本(ie6/7/8)認識html5元素
瀏覽器不會給未知元素設定任何樣式（不同瀏覽器對元素會有不同的默認樣式）在IE9之前的版本中，也不能對未知元素設定樣式，針對這個問題有一個彌補方案，感興趣的朋友可以參考下哈

來源：未知/所屬分類：HTML5教程/更新時間：2013-04-22

[收藏][報錯][返回列表]

相關HTML5教程：

突襲HTML5之Javascript API擴展2—地理信息服務及地理位置API學習_HTML5教程

HTML5教程Rss訂閱Div+Css教程搜索

HTML5教程推薦

猜你也喜歡看這些