build網(wǎng)站制作 |
HTML 5開發(fā):地理位置定位指南當前位置:首頁>主要服務(wù)>網(wǎng)站制作>html![]() 地理定位是HTML5提供的最令人激動的特性之一。 用相對簡單的JavaScript代碼,可以創(chuàng)建出能確定用戶地理位置詳細信息的Web應(yīng)用,包括經(jīng)緯度以及海拔等。一些Web應(yīng)用甚至能通過監(jiān)控用戶位置隨時間的移動來提供導(dǎo)航功能,其中還綜合了GoogleMaps API這樣的地圖系統(tǒng)。 和所有HTML5的功能一樣,你還不能依賴瀏覽器提供支持。而在瀏覽器提供支持的地方,它在深度和持續(xù)性上會有變化。本質(zhì)上,你需要為那些瀏覽器不能為HTML5提供完全支持的用戶提供替代功能。 在這篇教程里,我們會了解一些創(chuàng)建用戶位置信息的基本知識。實際操作中,瀏覽器可能從多處獲取數(shù)據(jù)。例如,可能是移動設(shè)備的GPS數(shù)據(jù)或是任意聯(lián)網(wǎng)設(shè)備上的IP地址數(shù)據(jù)。不過,你的代碼不需要考慮這些細節(jié),你只需檢索和使用位置數(shù)據(jù)。 HTML5 Web 頁面 使用下列代碼創(chuàng)建HTML5頁面的框架:
我們將JavaScript地理定位函數(shù)放到頁面標頭腳本的位置,還會放置一些用于測試和演示主題區(qū)功能的基本HTML要素。 HTML演示要素 向HTML主體部分添加下列markup:
可以隨時調(diào)用地理位置函數(shù),如頁面加載時或是與jQuery文檔準備函數(shù)合在一起時。為了更好地進行演示,我們使用按鈕調(diào)用函數(shù)而且會把位置數(shù)據(jù)寫入div要素中,div要素最初就有一些簡單的占位符文本。 獲取位置函數(shù) getPosition方法是我們用來確定用戶位置的主要方法。在頁面標頭的腳本區(qū)域添加下列函數(shù):
用戶點擊按鈕的時候就會調(diào)用函數(shù)。代碼首先會檢查導(dǎo)航器地理位置對象是否顯示出來,如果顯示出來則瀏覽器支持。如果地理位置對象被支持,那么代碼會使用它來調(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ù)后面:
這個代碼先創(chuàng)建了一個變量,在變量中創(chuàng)建了一個字符串,該字符串包含了位置參數(shù)的經(jīng)緯度數(shù)據(jù)。然后這個函數(shù)會把這個信息和一些信息化文本寫入頁面。在你自己的網(wǎng)站中,你還可以把這些數(shù)據(jù)用作其他目的,而不僅僅是寫入頁面——此處僅作演示用。 錯誤函數(shù) 使用地理位置設(shè)備的時候可能會出現(xiàn)錯誤。如,用戶或許不同意共享自己的地理位置數(shù)據(jù),瀏覽器可能不能檢索數(shù)據(jù)等。因此我們需要添加一個函數(shù)來處理應(yīng)對錯誤,使用getCurrentPosition方法的第二個函數(shù)。在displayLocation函數(shù)后添加下列函數(shù):
這個函數(shù)會地理位置請求發(fā)出后出現(xiàn)的錯誤信息進行檢索。該函數(shù)首先會獲取頁面div要素的參考以便寫入合適的錯誤信息。用交換語句對此信息進行調(diào)整使其適應(yīng)錯誤的特殊屬性。 考慮和選擇 以上函數(shù)涵蓋了用戶位置數(shù)據(jù)檢索的基本要點。你可以使用檢索過的位置數(shù)據(jù)通過Google Maps API在地圖上顯示用戶位置,主要是在自定義URL中創(chuàng)建數(shù)據(jù)變量,然后將其加載到你頁面的HTML圖像要素中。 你還可以使用watchPosition方法追蹤用戶位置甚至是他們移動的速度,盡管這些數(shù)據(jù)因為并非來自移動設(shè)備的GPS而缺乏準確性,例如數(shù)據(jù)可能來自無線網(wǎng)絡(luò)。 這些函數(shù)會為Web開發(fā)員帶來美好的未來。不過,它們的成功不僅需要瀏覽器提供支持,還得用戶喜歡,硬件支持。
1
|
易勢網(wǎng)站制作,以DIV+CSS為主,js/jQuery為輔,制作利于優(yōu)化,頁面美觀的優(yōu)質(zhì)網(wǎng)站!
網(wǎng)絡(luò)策劃公司|新浪官方微博|大連網(wǎng)站建設(shè)
沈陽易勢科技有限公司 網(wǎng)站制作網(wǎng)絡(luò)營銷公司 © 2011 , All rights reserved. 公司地址:沈陽市鐵西區(qū)貴和街道建設(shè)中路15號淺草綠閣商務(wù)樓402室沈陽網(wǎng)站制作易勢最專業(yè)
遼B2-20150173-8號