HTML 5開(kāi)發(fā)：地理位置定位指南
地理定位是HTML5提供的最令人激動(dòng)的特性之一。
用相對(duì)簡(jiǎn)單的JavaScript代碼，可以創(chuàng)建出能確定用戶地理位置詳細(xì)信息的Web應(yīng)用，包括經(jīng)緯度以及海拔等。一些Web應(yīng)用甚至能通過(guò)監(jiān)控用戶位置隨時(shí)間的移動(dòng)來(lái)提供導(dǎo)航功能，其中還綜合了GoogleMaps API這樣的地圖系統(tǒng)。
和所有HTML5的功能一樣，你還不能依賴瀏覽器提供支持。而在瀏覽器提供支持的地方，它在深度和持續(xù)性上會(huì)有變化。本質(zhì)上，你需要為那些瀏覽器不能為HTML5提供完全支持的用戶提供替代功能。
在這篇教程里，我們會(huì)了解一些創(chuàng)建用戶位置信息的基本知識(shí)。實(shí)際操作中，瀏覽器可能從多處獲取數(shù)據(jù)。例如，可能是移動(dòng)設(shè)備的GPS數(shù)據(jù)或是任意聯(lián)網(wǎng)設(shè)備上的IP地址數(shù)據(jù)。不過(guò)，你的代碼不需要考慮這些細(xì)節(jié)，你只需檢索和使用位置數(shù)據(jù)。
HTML5 Web 頁(yè)面
使用下列代碼創(chuàng)建HTML5頁(yè)面的框架：
- <!DOCTYPEhtml>
- <html>
- <head>
- <script>
- /*Locationfunctionshere*/
- </script>
- </head>
- <body>
- </body>
- </html>
我們將JavaScript地理定位函數(shù)放到頁(yè)面標(biāo)頭腳本的位置，還會(huì)放置一些用于測(cè)試和演示主題區(qū)功能的基本HTML要素。
HTML演示要素
向HTML主體部分添加下列markup：
- <input type="button"value="get location" onclick="getUserLocation()"/>
- <div id="locationData">
- Location data here
- </div>
可以隨時(shí)調(diào)用地理位置函數(shù)，如頁(yè)面加載時(shí)或是與jQuery文檔準(zhǔn)備函數(shù)合在一起時(shí)。為了更好地進(jìn)行演示，我們使用按鈕調(diào)用函數(shù)而且會(huì)把位置數(shù)據(jù)寫(xiě)入div要素中，div要素最初就有一些簡(jiǎn)單的占位符文本。
獲取位置函數(shù)
getPosition方法是我們用來(lái)確定用戶位置的主要方法。在頁(yè)面標(biāo)頭的腳本區(qū)域添加下列函數(shù)：
- functiongetUserLocation(){
- //checkifthegeolocationobjectissupported,ifsogetposition
- if(navigator.geolocation)
- navigator.geolocation.getCurrentPosition(displayLocation,displayError);
- else
- document.getElementById("locationData").innerHTML="Sorry-yourbrowserdoesn'tsupportgeolocation!";
- }
用戶點(diǎn)擊按鈕的時(shí)候就會(huì)調(diào)用函數(shù)。代碼首先會(huì)檢查導(dǎo)航器地理位置對(duì)象是否顯示出來(lái)，如果顯示出來(lái)則瀏覽器支持。如果地理位置對(duì)象被支持，那么代碼會(huì)使用它來(lái)調(diào)用getCurrentPosition方法。
getCurrerentPosition方法取兩個(gè)參數(shù)指示回調(diào)函數(shù)。，一個(gè)是在地理位置信息被獲取時(shí)調(diào)用的函數(shù)，還有一個(gè)是錯(cuò)誤返回時(shí)調(diào)用的函數(shù)。
如果地理位置對(duì)象不被支持，那么函數(shù)就只會(huì)把錯(cuò)誤信息寫(xiě)入頁(yè)面div要素中。
當(dāng)一個(gè)網(wǎng)站首次試圖檢索用戶位置數(shù)據(jù)時(shí)，用戶瀏覽器會(huì)命令其確定它們是否同意共享數(shù)據(jù)。該函數(shù)只在用戶同意的時(shí)候執(zhí)行。
顯示位置函數(shù)
下一步，我們需要部署的函數(shù)其實(shí)是getCurrentPosition方法調(diào)用中的第一個(gè)參數(shù)。當(dāng)瀏覽器接收到這個(gè)函數(shù)的時(shí)候，用戶位置數(shù)據(jù)會(huì)傳給這個(gè)函數(shù)。將下列代碼添加到getUserLocation函數(shù)后面：
- functiondisplayLocation(position){
- /buildtextstringincludingco-ordinatedatapassedinparameter
- vardisplayText="Userlatitudeis"+position.coords.latitude+"andlongitudeis"+position.coords.longitude;
- //displaythestringfordemonstration
- document.getElementById("locationData").innerHTML=displayText;
- }
這個(gè)代碼先創(chuàng)建了一個(gè)變量，在變量中創(chuàng)建了一個(gè)字符串，該字符串包含了位置參數(shù)的經(jīng)緯度數(shù)據(jù)。然后這個(gè)函數(shù)會(huì)把這個(gè)信息和一些信息化文本寫(xiě)入頁(yè)面。在你自己的網(wǎng)站中，你還可以把這些數(shù)據(jù)用作其他目的，而不僅僅是寫(xiě)入頁(yè)面——此處僅作演示用。
錯(cuò)誤函數(shù)
使用地理位置設(shè)備的時(shí)候可能會(huì)出現(xiàn)錯(cuò)誤。如，用戶或許不同意共享自己的地理位置數(shù)據(jù)，瀏覽器可能不能檢索數(shù)據(jù)等。因此我們需要添加一個(gè)函數(shù)來(lái)處理應(yīng)對(duì)錯(cuò)誤，使用getCurrentPosition方法的第二個(gè)函數(shù)。在displayLocation函數(shù)后添加下列函數(shù)：
- function displayError(error) {
- //get a reference to the HTML element forwriting result
- var locationElement =document.getElementById("locationData");
- //find out which error we have, outputmessage accordingly
- switch(error.code) {
- case error.PERMISSION_DENIED:
- locationElement.innerHTML= "Permission was denied";
- break;
- case error.POSITION_UNAVAILABLE:
- locationElement.innerHTML= "Location data not available";
- break;
- case error.TIMEOUT:
- locationElement.innerHTML= "Location request timeout";
- break;
- case error.UNKNOWN_ERROR:
- locationElement.innerHTML= "An unspecified error occurred";
- break;
- default:
- locationElement.innerHTML= "Who knows what happened...";
- break;
- }}
這個(gè)函數(shù)會(huì)地理位置請(qǐng)求發(fā)出后出現(xiàn)的錯(cuò)誤信息進(jìn)行檢索。該函數(shù)首先會(huì)獲取頁(yè)面div要素的參考以便寫(xiě)入合適的錯(cuò)誤信息。用交換語(yǔ)句對(duì)此信息進(jìn)行調(diào)整使其適應(yīng)錯(cuò)誤的特殊屬性。
考慮和選擇
以上函數(shù)涵蓋了用戶位置數(shù)據(jù)檢索的基本要點(diǎn)。你可以使用檢索過(guò)的位置數(shù)據(jù)通過(guò)Google Maps API在地圖上顯示用戶位置，主要是在自定義URL中創(chuàng)建數(shù)據(jù)變量，然后將其加載到你頁(yè)面的HTML圖像要素中。
你還可以使用watchPosition方法追蹤用戶位置甚至是他們移動(dòng)的速度，盡管這些數(shù)據(jù)因?yàn)椴⒎莵?lái)自移動(dòng)設(shè)備的GPS而缺乏準(zhǔn)確性，例如數(shù)據(jù)可能來(lái)自無(wú)線網(wǎng)絡(luò)。
這些函數(shù)會(huì)為Web開(kāi)發(fā)員帶來(lái)美好的未來(lái)。不過(guò)，它們的成功不僅需要瀏覽器提供支持，還得用戶喜歡，硬件支持。
原文：http://www.e800.com.cn/articles/2012/0214/502849.shtml
【編輯推薦】
