日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML5開發(fā)：地理位置定位指南

地理定位是HTML5提供的最令人激動的特性之一。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設、高性價比文登網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式文登網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設找我們，業(yè)務覆蓋文登地區(qū)。費用合理售后完善，十多年實體公司更值得信賴。

用相對簡單的JavaScript代碼，可以創(chuàng)建出能確定用戶地理位置詳細信息的Web應用，包括經(jīng)緯度以及海拔等。一些Web應用甚至能通過監(jiān)控用戶位置隨時間的移動來提供導航功能，其中還綜合了GoogleMaps API這樣的地圖系統(tǒng)。

和所有HTML5的功能一樣，你還不能依賴瀏覽器提供支持。而在瀏覽器提供支持的地方，它在深度和持續(xù)性上會有變化。本質(zhì)上，你需要為那些瀏覽器不能為HTML5提供完全支持的用戶提供替代功能。

在這篇教程里，我們會了解一些創(chuàng)建用戶位置信息的基本知識。實際操作中，瀏覽器可能從多處獲取數(shù)據(jù)。例如，可能是移動設備的GPS數(shù)據(jù)或是任意聯(lián)網(wǎng)設備上的IP地址數(shù)據(jù)。不過，你的代碼不需要考慮這些細節(jié)，你只需檢索和使用位置數(shù)據(jù)。

HTML5 Web 頁面

使用下列代碼創(chuàng)建HTML5頁面的框架：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9.

我們將JavaScript地理定位函數(shù)放到頁面標頭腳本的位置，還會放置一些用于測試和演示主題區(qū)功能的基本HTML要素。

HTML演示要素

向HTML主體部分添加下列markup：

 
 
 
    
  
  
  
  1.  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. Location data here  
    4.
 

可以隨時調(diào)用地理位置函數(shù)，如頁面加載時或是與jQuery文檔準備函數(shù)合在一起時。為了更好地進行演示，我們使用按鈕調(diào)用函數(shù)而且會把位置數(shù)據(jù)寫入div要素中，div要素最初就有一些簡單的占位符文本。

獲取位置函數(shù)

getPosition方法是我們用來確定用戶位置的主要方法。在頁面標頭的腳本區(qū)域添加下列函數(shù)：

 
 
 
    
  
  
  
  1. functiongetUserLocation(){  
    2. 
  
  
  
  2. //checkifthegeolocationobjectissupported,ifsogetposition  
    3. 
  
  
  
  3. if(navigator.geolocation)  
    4. 
  
  
  
  4. navigator.geolocation.getCurrentPosition(displayLocation,displayError);  
    5. 
  
  
  
  5. else  
    6. 
  
  
  
  6. document.getElementById("locationData").innerHTML="Sorry-yourbrowserdoesn'tsupportgeolocation!";  
    7. 
  
  
  
  7. } 
    8.

用戶點擊按鈕的時候就會調(diào)用函數(shù)。代碼首先會檢查導航器地理位置對象是否顯示出來，如果顯示出來則瀏覽器支持。如果地理位置對象被支持，那么代碼會使用它來調(diào)用getCurrentPosition方法。

getCurrerentPosition方法取兩個參數(shù)指示回調(diào)函數(shù)。，一個是在地理位置信息被獲取時調(diào)用的函數(shù)，還有一個是錯誤返回時調(diào)用的函數(shù)。

如果地理位置對象不被支持，那么函數(shù)就只會把錯誤信息寫入頁面div要素中。

當一個網(wǎng)站首次試圖檢索用戶位置數(shù)據(jù)時，用戶瀏覽器會命令其確定它們是否同意共享數(shù)據(jù)。該函數(shù)只在用戶同意的時候執(zhí)行。

顯示位置函數(shù)

下一步，我們需要部署的函數(shù)其實是getCurrentPosition方法調(diào)用中的第一個參數(shù)。當瀏覽器接收到這個函數(shù)的時候，用戶位置數(shù)據(jù)會傳給這個函數(shù)。將下列代碼添加到getUserLocation函數(shù)后面：

 
 
 
    
  
  
  
  1. functiondisplayLocation(position){  
    2. 
  
  
  
  2. /buildtextstringincludingco-ordinatedatapassedinparameter  
    3. 
  
  
  
  3. vardisplayText="Userlatitudeis"+position.coords.latitude+"andlongitudeis"+position.coords.longitude;  
    4. 
  
  
  
  4. //displaythestringfordemonstration  
    5. 
  
  
  
  5. document.getElementById("locationData").innerHTML=displayText;  
    6. 
  
  
  
  6. } 
    7.

這個代碼先創(chuàng)建了一個變量，在變量中創(chuàng)建了一個字符串，該字符串包含了位置參數(shù)的經(jīng)緯度數(shù)據(jù)。然后這個函數(shù)會把這個信息和一些信息化文本寫入頁面。在你自己的網(wǎng)站中，你還可以把這些數(shù)據(jù)用作其他目的，而不僅僅是寫入頁面——此處僅作演示用。

錯誤函數(shù)

使用地理位置設備的時候可能會出現(xiàn)錯誤。如，用戶或許不同意共享自己的地理位置數(shù)據(jù)，瀏覽器可能不能檢索數(shù)據(jù)等。因此我們需要添加一個函數(shù)來處理應對錯誤，使用getCurrentPosition方法的第二個函數(shù)。在displayLocation函數(shù)后添加下列函數(shù)：

 
 
 
    
  
  
  
  1. function displayError(error) {  
    2. 
  
  
  
  2. //get a reference to the HTML element forwriting result  
    3. 
  
  
  
  3. var locationElement =document.getElementById("locationData");  
    4. 
  
  
  
  4. //find out which error we have, outputmessage accordingly  
    5. 
  
  
  
  5. switch(error.code) {  
    6. 
  
  
  
  6. case error.PERMISSION_DENIED:  
    7. 
  
  
  
  7. locationElement.innerHTML= "Permission was denied";  
    8. 
  
  
  
  8. break;  
    9. 
  
  
  
  9. case error.POSITION_UNAVAILABLE:  
    10. 
  
  
  
  10. locationElement.innerHTML= "Location data not available";  
    11. 
  
  
  
  11. break;  
    12. 
  
  
  
  12. case error.TIMEOUT:  
    13. 
  
  
  
  13. locationElement.innerHTML= "Location request timeout";  
    14. 
  
  
  
  14. break;  
    15. 
  
  
  
  15. case error.UNKNOWN_ERROR:  
    16. 
  
  
  
  16. locationElement.innerHTML= "An unspecified error occurred";  
    17. 
  
  
  
  17. break;  
    18. 
  
  
  
  18. default:  
    19. 
  
  
  
  19. locationElement.innerHTML= "Who knows what happened...";  
    20. 
  
  
  
  20. break;  
    21. 
  
  
  
  21. }} 
    22.

這個函數(shù)會地理位置請求發(fā)出后出現(xiàn)的錯誤信息進行檢索。該函數(shù)首先會獲取頁面div要素的參考以便寫入合適的錯誤信息。用交換語句對此信息進行調(diào)整使其適應錯誤的特殊屬性。

考慮和選擇

以上函數(shù)涵蓋了用戶位置數(shù)據(jù)檢索的基本要點。你可以使用檢索過的位置數(shù)據(jù)通過Google Maps API在地圖上顯示用戶位置，主要是在自定義URL中創(chuàng)建數(shù)據(jù)變量，然后將其加載到你頁面的HTML圖像要素中。

你還可以使用watchPosition方法追蹤用戶位置甚至是他們移動的速度，盡管這些數(shù)據(jù)因為并非來自移動設備的GPS而缺乏準確性，例如數(shù)據(jù)可能來自無線網(wǎng)絡。

這些函數(shù)會為Web開發(fā)員帶來美好的未來。不過，它們的成功不僅需要瀏覽器提供支持，還得用戶喜歡，硬件支持。

原文：http://www.e800.com.cn/articles/2012/0214/502849.shtml


網(wǎng)站名稱：HTML5開發(fā)：地理位置定位指南
文章URL：http://www.dlmjj.cn/article/djspjsg.html