通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——在html5中如何獲取地理位置信息及應(yīng)用實(shí)例第1部分-wenkub
2022-11-25 07:39:59 本頁(yè)面
【正文】 地理位置信息 （ 1） watchPosition 方法實(shí)現(xiàn)一個(gè)追蹤器達(dá)到持續(xù)監(jiān)視當(dāng)前地理位置信息的效果 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 8/27 頁(yè) 8 有時(shí)候，僅獲取一次用戶位置信息是不夠的。 UNKNOWN_ERROR (0)—— 不包括在其它錯(cuò)誤編號(hào)中的錯(cuò)誤，需要通過(guò) message 參數(shù)查找錯(cuò)誤的詳細(xì)信息。 （ 2）獲取地理位置成功時(shí)的 position 包含的屬性 getCurrentPosition 方法不僅可以返回緯度和經(jīng)度的坐標(biāo)值，也還提供對(duì)位置坐標(biāo)的準(zhǔn)確度控制。 case 4: updateStatus(“未知錯(cuò)誤。 break。” )。 alert(errorType[]+:獲取地理位置錯(cuò)誤 ,請(qǐng)檢查您的網(wǎng)絡(luò)是否通暢 !)。獲取不到位置 39。+longitude。).value = 39。 完整的獲取地理位置信息程序代碼示例 （ 1）代碼示例 ( function(position){ var latitude = 。 （ 3） tmeout（單位為毫秒，默認(rèn)值為 0） 告訴瀏覽器獲取當(dāng)前位置信息所允許的最長(zhǎng)時(shí)間（但用戶選擇期間是不計(jì)時(shí)的），如果在這個(gè)時(shí)間段內(nèi)未完成，就會(huì)調(diào)用錯(cuò)誤處理程序。 （ 1） enableHighAccuracy（ Boolean 類型，默認(rèn)值為 false） 是否嘗試更精確 地讀取緯度和經(jīng)度數(shù)據(jù)（但這個(gè)參數(shù)在很多設(shè)備上沒(méi)有用，而且將會(huì)導(dǎo)致設(shè)備花費(fèi)更多的時(shí)間和資源來(lái)確定位置，應(yīng)謹(jǐn)慎使用。 （ 2） getCurrentPosition 方法的定義 void getCurrentPosition(onSuccess, onError, options)。 } 上面的示例代碼應(yīng)該在頁(yè)面加載時(shí)就應(yīng)該要被調(diào)用，如果瀏覽器支持 HTML5 獲取地理位置信息服務(wù)，對(duì) 的調(diào)用將返回該對(duì)象，否則將觸發(fā)錯(cuò)誤；當(dāng)瀏覽器不支持 HTML5 獲取地理位置信息服務(wù)時(shí)，可以提供一些替代文本，以提示用戶升級(jí)瀏覽器或安裝插件（如 Gears）來(lái)增強(qiáng)現(xiàn)有瀏覽器功能。但由于各個(gè)瀏覽器對(duì)該技術(shù)的支持程度是不同的，在使用之前最好先檢查瀏覽器是否支持 HTML5 Geolocation API。 （ 2） Geolocation API 中存在有如下的三個(gè)方法 1) getCurrentPosition 以異步調(diào)用的方式獲取地理位置 2) watchPosition 持續(xù)監(jiān)視當(dāng)前地理位置的信息 數(shù)據(jù)源 優(yōu)點(diǎn) 缺點(diǎn) IP 地址 任何地方都可用 ，特別是 在服務(wù)器端處理 不精確（經(jīng)常出錯(cuò)，一般精確到城市級(jí)） ，而且 運(yùn)算代價(jià)大 。如果要重傳位置數(shù)據(jù)，建議對(duì)其進(jìn)行加密。 （ 2）瀏覽器提供安全提示 在獲取地理位置信息前，首先瀏覽器都會(huì)向用戶詢問(wèn)是否愿意共享其位置信息，待用戶同意后才能使用 —— 因?yàn)檫@涉及用戶的隱私安全問(wèn)題，所以當(dāng)一個(gè)站點(diǎn)需要獲取用戶的當(dāng)前地理位置，瀏覽器會(huì)提示用戶是“允許” or “拒絕”。 由于 HTML5 Geolocation API 是運(yùn)行在用戶本地設(shè)備上的，因此即使用戶是使用 VPN或代理的情況下， HTML5 Geolocation API 仍能獲得用戶準(zhǔn)確的 IP 地址信息。 考慮到用戶的隱私，建議在使用 HTML5 Geolocation 時(shí)，一定要告知用戶： 1) 會(huì)收集用戶的地理位置數(shù)據(jù) 2) 為何收集用戶的地理位置數(shù)據(jù) 3) 位置數(shù)據(jù)保存的時(shí)間 4) 用戶如何更新他的位置數(shù)據(jù) 5) 如何使用用戶的地理位置數(shù)據(jù) （ 4）位置信息一般可以從如下形式的數(shù)據(jù)源獲得 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 3/27 頁(yè) 3 Geolocation API 的數(shù)據(jù)來(lái)源可能是 GPS、 IP 地址、 RFID、 WiFi、藍(lán)牙 MAC 地址、GSM/CDMA 卡 ID 等，主要來(lái)源如下： 1) IP 地址 2) 三維坐標(biāo) GPS（ Global Positioning System，全球定位系統(tǒng)） 3) WiFi 4) 手機(jī)信號(hào) 5) 用戶自定義數(shù)據(jù) 基于各種位置信息的數(shù)據(jù)源獲取地理位置信息的對(duì)比 HTML5 獲取地理位置信息是通過(guò) Geolocation API 實(shí)現(xiàn)的 Geolocation API 用于將用戶當(dāng)前地理位置信息共享給信任的站點(diǎn)，該位置信息是通過(guò)支持地理定位功能的底層設(shè)備（比如筆記本電腦或手機(jī) ）提供給瀏覽器的。 GPS 很精確 定位時(shí)間長(zhǎng)，耗電量大 ； 室內(nèi)效果差 ；需要額外硬件設(shè)備支持 。 if () { alert(瀏覽器支持 HTML5 獲取地理位置信息服務(wù) )。 獲取當(dāng)前地理位置信息 （ 1）使用 getCurrentPosition 方法來(lái)獲取用戶地理位置信息 getCurrentPosition 方法返回用戶地理位置的經(jīng)緯度坐標(biāo)信息，而經(jīng)緯度坐標(biāo)有兩種 表示方式：十進(jìn)制格式（例如 ）和 DMS（ Degree Minute Second，角度）格式（例如 39176。 其中的各個(gè)參數(shù)的含義如下： 1) onSuccess 參數(shù)是返回獲取地理位置成功時(shí)需要完成什么的事件響應(yīng)回調(diào)函數(shù)； 2) 由于獲取位置的系統(tǒng)操作可能需要較長(zhǎng) 時(shí)間才能完成，用戶不希望在檢索位置時(shí)瀏覽器被鎖定，因此將該參數(shù)采用異步方式接收實(shí)際的位置信息。所以大多數(shù)情況下都將它設(shè)為默認(rèn)值 false），而在移動(dòng)設(shè)備上，這可能要使用手機(jī)上的 GPS，這會(huì)消耗移動(dòng)設(shè)備更多的電量。默認(rèn)值為 Infinity，即無(wú)窮大（無(wú)限制）。 //獲取當(dāng)前位置的緯度 var longitude = 。緯度 :39。 }, function(error){ var errorType= {1:39。, 3:39。 /**也可以采用如下的代碼顯示修改的錯(cuò)誤信息 switch () { case 0: alert (“嘗試獲取您的位置信息時(shí)發(fā)生錯(cuò)誤：” + )。 break。 case 3: updateStatus(“獲取您位置信息超時(shí)?！?)。除此之外，它還會(huì)提供其它一些元數(shù)據(jù)，比如海拔、海拔準(zhǔn)確度、行駛方向和速度等，但具體結(jié)果需要取決于瀏覽器所在的硬件設(shè)備。 PERMISSION_DENIED (1)—— 用戶拒絕瀏覽器獲得其位置信息服務(wù)。比如用戶正在移動(dòng)，隨著用戶的移動(dòng)，系統(tǒng)應(yīng)該能夠不斷更新顯示用戶的位置信息 —— 因?yàn)?watchPosition 就像一個(gè)追蹤器一樣實(shí)時(shí)監(jiān)視用戶的位置變化。 該方法中 的三個(gè)參數(shù)的說(shuō)明和使用方法和前面的 getCurrentPosition 方法的參數(shù)一樣，并返回一個(gè) ID 數(shù)值。該方法中的 watchId參數(shù)是調(diào)用前面的 watchCurrentPosition 方法監(jiān)視時(shí)返回的參數(shù)。 獲取用戶的地理位置信息示例 （ 1）代碼示例 !DOCTYPE html 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 9/27 頁(yè) 9 html head meta equiv=ContentType content=text/html。showGeolocationDataDivTagID39。 + latitudeValue + 39。showGeolocationDataDivTagID39。showGeolocationDataDivTagID39。 （ 4）在 Google 的 Chrome 瀏覽器中執(zhí)行的結(jié)果 但在 Google 的 Chrome 瀏覽器中執(zhí)行后，出現(xiàn)下面禁止獲得位置服務(wù)的提示信息 ——點(diǎn)擊 URL 地址 3 欄右端的“叉號(hào)”按鈕，將會(huì)彈出下面的警告信息提示框。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 13/27 頁(yè) 13 但仍然不管用，繼續(xù)出現(xiàn)前面的“錯(cuò)誤編碼為： 1， 錯(cuò)誤信息為： User denied Geolocation”。 charset=gb18030 title持續(xù)跟蹤獲取用戶的地理位置信息示例 /title /head body div id=showGeolocationDataDivTagIDdiv input type=button value= 啟 動(dòng) 持 續(xù) 跟 蹤 onClick=startWatchGeolocationPositionData()。 } function closeWatchGe
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1