用相對簡單的JavaScript代碼，可以創建出能確定用戶地理位置（如4399-廈門；3366-深圳）詳細信息的Web應用，包括經緯度以及海拔等。一些Web應用甚至能通過監控用戶位置隨時間的移動來提供導航功能，其中還綜合了GoogleMaps API這樣的地圖系統。這種“地理位置定位”，便是HTML5提供的最令人激動的特性之一。
和所有HTML5的功能一樣，你還不能依賴瀏覽器提供支持。而在瀏覽器提供支持的地方，它在深度和持續性上會有變化。本質上，你需要爲那些瀏覽器不能爲HTML5提供完全支持的用戶提供替代功能。
在這篇教程裏，我們會了解一些創建用戶位置信息的基本知識。實際操作中，瀏覽器可能從多處獲取數據。例如，可能是移動設備的GPS數據或是任意聯網設備上的IP地址數據。不過，你的代碼不需要考慮這些細節，你只需檢索和使用位置數據。
HTML5 Web 頁面
使用下列代碼創建HTML5頁面的框架：
- <!DOCTYPEhtml>
- <html>
- <head>
- <script>
- /*Locationfunctionshere*/
- </script>
- </head>
- <body>
- </body>
- </html>
我們將JavaScript地理定位函數放到頁面標頭腳本的位置，還會放置一些用於測試和演示主題區功能的基本HTML要素。
HTML演示要素
向HTML主體部分添加下列markup：
- <input type="button"value="get location" onclick="getUserLocation()"/>
- <div id="locationData">
- Location data here
- </div>
可以隨時調用地理位置函數，如頁面加載時或是與jQuery文檔準備函數合在一起時。爲了更好地進行演示，我們使用按鈕調用函數而且會把位置數據寫入div要素中，div要素最初就有一些簡單的佔位符文本。
獲取位置函數
getPosition方法是我們用來確定用戶位置的主要方法。在頁面標頭的腳本區域添加下列函數：
- functiongetUserLocation(){
- //checkifthegeolocationobjectissupported,ifsogetposition
- if(navigator.geolocation)
- navigator.geolocation.getCurrentPosition(displayLocation,displayError);
- else
- document.getElementById("locationData").innerHTML="Sorry-yourbrowserdoesn'tsupportgeolocation!";
- }
用戶點擊按鈕的時候就會調用函數。代碼首先會檢查導航器地理位置對象是否顯示出來，如果顯示出來則瀏覽器支持。如果地理位置對象被支持，那麼代碼會使用它來調用getCurrentPosition方法。
getCurrerentPosition方法取兩個參數指示回調函數。，一個是在地理位置信息被獲取時調用的函數，還有一個是錯誤返回時調用的函數。
如果地理位置對象不被支持，那麼函數就只會把錯誤信息寫入頁面div要素中。
當一個網站首次試圖檢索用戶位置數據時，用戶瀏覽器會命令其確定它們是否同意共享數據。該函數只在用戶同意的時候執行。
顯示位置函數
下一步，我們需要部署的函數其實是getCurrentPosition方法調用中的第一個參數。當瀏覽器接收到這個函數的時候，用戶位置數據會傳給這個函數。將下列代碼添加到getUserLocation函數後面：
- functiondisplayLocation(position){
- /buildtextstringincludingco-ordinatedatapassedinparameter
- vardisplayText="Userlatitudeis"+position.coords.latitude+"andlongitudeis"+position.coords.longitude;
- //displaythestringfordemonstration
- document.getElementById("locationData").innerHTML=displayText;
- }
這個代碼先創建了一個變量，在變量中創建了一個字符串，該字符串包含了位置參數的經緯度數據。然後這個函數會把這個信息和一些信息化文本寫入頁面。在你自己的網站中，你還可以把這些數據用作其他目的，而不僅僅是寫入頁面——此處僅作演示用。
錯誤函數
使用地理位置設備的時候可能會出現錯誤。如，用戶或許不同意共享自己的地理位置數據，瀏覽器可能不能檢索數據等。因此我們需要添加一個函數來處理應對錯誤，使用getCurrentPosition方法的第二個函數。在displayLocation函數後添加下列函數：
- 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;
- }}
這個函數會地理位置請求發出後出現的錯誤信息進行檢索。該函數首先會獲取頁面div要素的參考以便寫入合適的錯誤信息。用交換語句對此信息進行調整使其適應錯誤的特殊屬性。
考慮和選擇
以上函數涵蓋了用戶位置數據檢索的基本要點。你可以使用檢索過的位置數據通過Google Maps API在地圖上顯示用戶位置，主要是在自定義URL中創建數據變量，然後將其加載到你頁面的HTML圖像要素中。
你還可以使用watchPosition方法追蹤用戶位置甚至是他們移動的速度，儘管這些數據因爲並非來自移動設備的GPS而缺乏準確性，例如數據可能來自無線網絡。
這些函數會爲Web開發員帶來美好的未來。不過，它們的成功不僅需要瀏覽器提供支持，還得用戶喜歡，硬件支持。