突襲HTML5之Javascript API擴(kuò)展2—地理信息服務(wù)及地理位置API學(xué)習(xí)_HTML5教程
推薦：html5新增的屬性和廢除的屬性簡(jiǎn)要概述HTML5中，在新增加和廢除很多元素的同時(shí)，也增加和廢除了很多屬性比如表單相關(guān)的屬性/鏈接相關(guān)屬性是新增的而HTML4中一些屬性就被廢除掉了，感興趣的你可以了解下，或許對(duì)你學(xué)習(xí)html5有所幫助
現(xiàn)在比較火的一類服務(wù)叫做基于位置的服務(wù)(location-based service， LBS)，這一類服務(wù)就是企業(yè)利用某點(diǎn)(例如用戶所在的位置)坐標(biāo)附近的區(qū)域提供服務(wù)的信息，比如常見的地圖相關(guān)服務(wù)。在HTML5中，加入了新的地理位置API用來確定和分享地理位置。隱私申明
在與遠(yuǎn)程Web服務(wù)器共享物理位置時(shí)，隱私是一個(gè)需要關(guān)注的問題。因此，地理位置API會(huì)要求用戶先提供權(quán)限，然后Web應(yīng)用程序才能訪問位置信息。首次訪問請(qǐng)求地理位置數(shù)據(jù)的網(wǎng)頁時(shí)，瀏覽器將顯示一個(gè)通知欄，提示提供對(duì)用戶位置的訪問權(quán)限。按照瀏覽器的提示，選擇相關(guān)的授權(quán)即可。
如果用戶未授予權(quán)限，則不會(huì)向 Web 應(yīng)用程序提供位置信息。調(diào)用相關(guān)API不會(huì)觸發(fā)成功回調(diào)。
檢查瀏覽器的支持情況
地理位置API在主流的瀏覽器的最新版中都支持了，但是為了兼容老的瀏覽器，還是要檢查一下。如果地理位置 API 不可用，則 window.navigator.geolocation 將為 null，如下所示：
復(fù)制代碼 代碼如下:m.dounai2.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這一全局對(duì)象的一個(gè)新屬性：navigator.geolocation，該對(duì)象提供了一些關(guān)于訪問者的瀏覽器和系統(tǒng)的有用信息。Geolocation的信息可以通過許多手段獲得：比如基站、web的數(shù)據(jù)庫或是GPS等。使用不同的方式獲取到的Geolocation信息精度也是不一樣的，通常情況下，通過GPS獲得的最為準(zhǔn)確(移動(dòng)平臺(tái)上使用GPS最多，PC平臺(tái)上基本都是靠網(wǎng)絡(luò)數(shù)據(jù))。偶然情況下，在一些位置上，你有可能不能獲得明確的地理位置讀數(shù)或是一點(diǎn)數(shù)據(jù)都接收不到。
定位當(dāng)前位置
使用navigator.geolocation的getCurrentPosition()方法獲取用戶的當(dāng)前位置，這個(gè)方法只獲取一次位置的信息。當(dāng)該方法被腳本調(diào)用時(shí)，方法以異步的方式來嘗試獲取宿主設(shè)備的當(dāng)前位置。
復(fù)制代碼 代碼如下:m.dounai2.com
方法簽名：getCurrentPosition(geolocationSuccessCallback,[geolocationErrorCallback,geolocationOptions]);
1. geolocationSuccessCallback：獲取當(dāng)前位置成功后的回調(diào)(必需的)
2. geolocationErrorCallback. 有錯(cuò)誤發(fā)生時(shí)使用的回調(diào)(可選的)
3. geolocationOptions. 地理位置選項(xiàng)(可選的)
處理位置信息
getCurrentPositon()方法獲得當(dāng)前位置成功后會(huì)將位置信息保存到一個(gè)Position對(duì)象中，然后把這個(gè)對(duì)象作為參數(shù)來執(zhí)行g(shù)eolocationSuccessCallback這一回調(diào)。在這個(gè)回調(diào)函數(shù)中，你可以任意處置這個(gè)對(duì)象中包含的信息。
Position對(duì)象有兩個(gè)屬性：timestamp和coords。timestamp屬性表示地理位置數(shù)據(jù)的創(chuàng)建時(shí)間，coords屬性表示地理位置信息，又包含七個(gè)屬性：
復(fù)制代碼 代碼如下:m.dounai2.com
. coords.latitude：估計(jì)緯度
. coords.longitude：估計(jì)經(jīng)度
. coords.altitude：估計(jì)高度
. coords.accuracy：所提供的以米為單位的經(jīng)度和緯度估計(jì)的精確度
. coords.altitudeAccuracy：所提供的以米為單位的高度估計(jì)的精確度
. coords.heading： 宿主設(shè)備當(dāng)前移動(dòng)的角度方向，相對(duì)于正北方向順時(shí)針計(jì)算
. coords.speed：以米每秒為單位的設(shè)備的當(dāng)前對(duì)地速度
一般的，這些屬性中有三項(xiàng)是保證有的：coords.latitude、coords.longitude和coords.accuracy，其余的返回null；這取決于設(shè)備的能力和其所采用的后端定位服務(wù)器。而且，heading和speed屬性可以基于用戶之前的位置計(jì)算出來。
處理錯(cuò)誤
執(zhí)行g(shù)etCurrentPositon()方法時(shí)如果有錯(cuò)誤發(fā)生的話，則該方法傳遞一個(gè)PositionError對(duì)象給geolocationErrorCallback回調(diào)。
設(shè)置地理位置選項(xiàng)
你可以設(shè)置geolocationOptions的三個(gè)屬性：
復(fù)制代碼 代碼如下:m.dounai2.com
enableHighAccuracy:如果設(shè)備支持高精度的話，這個(gè)選項(xiàng)表示是否啟用高精度。
timeout:查詢超時(shí)時(shí)間
maximumAge: 緩存的位置最大的時(shí)間數(shù)，在這一時(shí)間段內(nèi)緩存可被使用。
看下面完整的例子：
復(fù)制代碼 代碼如下:m.dounai2.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>
這個(gè)例子獲取到當(dāng)前設(shè)備所在的地理位置并顯示到Google地圖中。當(dāng)然你可以使用百度地圖API中的靜態(tài)圖版來改造這個(gè)例子。百度地圖API參看后面的實(shí)用參考中的鏈接。
開啟/取消持續(xù)定位
使用navigator.geolocation的watchPosition()方法可以定期輪詢用戶的位置，查看用戶的位置是否發(fā)生改變。這個(gè)方法有三個(gè)參數(shù)：這三個(gè)參數(shù)和getCurrentPosition()方法一樣，一個(gè)成功后的回調(diào)，一個(gè)失敗后的回調(diào)，和一個(gè)獲取位置信息的選項(xiàng)；這個(gè)方法有一個(gè)返回值watchID，用于取消持續(xù)定位。
使用navigator.geolocation的clearWatch()方法可以終止正在進(jìn)行的watchPosition()，該方法只帶一個(gè)參數(shù)watchID。
看下面的例子：
復(fù)制代碼 代碼如下:m.dounai2.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>
實(shí)用參考：
官方文檔：http://www.w3schools.com/html5/html5_geolocation.asp
模板無憂：http://m.dounai2.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)認(rèn)識(shí)html5元素瀏覽器不會(huì)給未知元素設(shè)定任何樣式（不同瀏覽器對(duì)元素會(huì)有不同的默認(rèn)樣式）在IE9之前的版本中，也不能對(duì)未知元素設(shè)定樣式，針對(duì)這個(gè)問題有一個(gè)彌補(bǔ)方案，感興趣的朋友可以參考下哈
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- 如何讓IE9以下版本(ie6/7/8)認(rèn)識(shí)html5元素
- html5中canvas學(xué)習(xí)筆記1-畫板的尺寸與實(shí)際顯示尺寸
- html5 Canvas畫圖教程(6)—canvas里畫曲線之a(chǎn)rcTo方法
- html5 Canvas畫圖教程(2)—畫直線與設(shè)置線條的樣式如顏色/端點(diǎn)/交匯點(diǎn)
- HTML5 語音搜索(淘寶店語音搜素)
- css3 transform 3d 使用css3創(chuàng)建動(dòng)態(tài)3d立方體(html5實(shí)踐)
- html5聲頻audio和視頻video等新特性詳細(xì)說明
- 免費(fèi)獲得微軟MCSD證書趕快行動(dòng)吧！
- html5 跨文檔消息傳輸示例探討
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- 相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索突襲HTML5之Javascript API擴(kuò)展2—地理信息服務(wù)及地理位置API學(xué)習(xí)
- 教程說明：
HTML5教程-突襲HTML5之Javascript API擴(kuò)展2—地理信息服務(wù)及地理位置API學(xué)習(xí)
。