【正文】 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 1/27 頁 1 目 錄 在 HTML5 中如何獲取地理位置信息及應(yīng)用實(shí)例（第 1 部分） .......................... 2 HTML5 全面支持地理位置信息服務(wù) ............................................................... 2 持續(xù)跟 蹤獲取用戶的地理位置信息 ................................................................ 13 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 2/27 頁 2 在 HTML5 中如何獲取地理位置信息及應(yīng)用實(shí)例 （第 1 部分） HTML5 全面支持 地理位置信息服務(wù) 地理位置信息服務(wù)的支持 （ 1） HTML5 中提供了獲得地理位置信息的 API（也稱為 Geolocation API） 應(yīng)用該技術(shù)，最終可以實(shí)現(xiàn)通過瀏覽器來獲取用戶當(dāng)前位置，它特別適合開發(fā)運(yùn)行在移動(dòng)設(shè)備如手機(jī)上的基于位置的各種服務(wù)應(yīng)用系統(tǒng) —— 如午餐時(shí)間到了，應(yīng)用系統(tǒng)可以為用戶提供附近餐館的特色菜及其價(jià)格和評(píng)論等信息。 （ 2）瀏覽器提供安全提示 在獲取地理位置信息前，首先瀏覽器都會(huì)向用戶詢問是否愿意共享其位置信息，待用戶同意后才能使用 —— 因?yàn)檫@涉及用戶的隱私安全問題，所以當(dāng)一個(gè)站點(diǎn)需要獲取用戶的當(dāng)前地理位置，瀏覽器會(huì)提示用戶是“允許” or “拒絕”。 由于 HTML5 Geolocation API 是運(yùn)行在用戶本地設(shè)備上的，因此即使用戶是使用 VPN或代理的情況下， HTML5 Geolocation API 仍能獲得用戶準(zhǔn)確的 IP 地址信息。 （ 3）應(yīng)用系統(tǒng)有責(zé)任保護(hù)個(gè)人的敏感信息 因?yàn)榈乩砦恢脭?shù)據(jù)屬于個(gè)人的敏感信息 ，應(yīng)用系統(tǒng)接收到這些地理位置數(shù)據(jù)之后，必須小心地處理、存儲(chǔ)和重傳。如果用戶沒有授權(quán)應(yīng)用系統(tǒng)存儲(chǔ)這些敏感數(shù)據(jù)，那么應(yīng)用程序應(yīng)該在相應(yīng)任務(wù)完成后立即刪除它。如果要重傳位置數(shù)據(jù)，建議對(duì)其進(jìn)行加密。 考慮到用戶的隱私，建議在使用 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 頁 3 Geolocation API 的數(shù)據(jù)來源可能是 GPS、 IP 地址、 RFID、 WiFi、藍(lán)牙 MAC 地址、GSM/CDMA 卡 ID 等，主要來源如下： 1) IP 地址 2) 三維坐標(biāo) GPS（ Global Positioning System，全球定位系統(tǒng)） 3) WiFi 4) 手機(jī)信號(hào) 5) 用戶自定義數(shù)據(jù) 基于各種位置信息的數(shù)據(jù)源獲取地理位置信息的對(duì)比 HTML5 獲取地理位置信息是通過 Geolocation API 實(shí)現(xiàn)的 Geolocation API 用于將用戶當(dāng)前地理位置信息共享給信任的站點(diǎn)，該位置信息是通過支持地理定位功能的底層設(shè)備（比如筆記本電腦或手機(jī) ）提供給瀏覽器的。位置信息由緯度、經(jīng)度坐標(biāo)和一些其他元數(shù)據(jù)組成。 （ 1） Geolocation 成員屬性 Geolocation 是 對(duì)象中新增加的成員屬性。 （ 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à)大 。 GPS 很精確 定位時(shí)間長(zhǎng)，耗電量大 ； 室內(nèi)效果差 ；需要額外硬件設(shè)備支持 。 WiFi 精確 ，可 以 在室內(nèi)使用 ， 簡(jiǎn)單、快捷 在鄉(xiāng)村這些 WiFi 接入點(diǎn)少的地區(qū)無法使用 手機(jī)信號(hào) 相當(dāng)準(zhǔn)確 ，同樣也可以 在室內(nèi)使用 ， 簡(jiǎn)單、快捷 。 需要能夠訪問手機(jī)或其 modem 設(shè)備 用戶自定義 可獲得比程序定位服務(wù)更準(zhǔn)確的位置數(shù)據(jù) ， 用戶自行輸入可能比自動(dòng)檢測(cè)更快 可能很不準(zhǔn)確，特別是當(dāng)用戶位置變更后 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 4/27 頁 4 3) clearWatch 停止獲取用戶的地理位置信息 （ 3）識(shí)別當(dāng)前的瀏覽器是否支持 HTML5 獲取地理位置信息服務(wù) 盡管 +、 +、 +、 +、 +、 +、 +等瀏覽器都提供對(duì)該技術(shù)的支持，包括最新的移動(dòng)手機(jī)。但由于各個(gè)瀏覽器對(duì)該技術(shù)的支持程度是不同的，在使用之前最好先檢查瀏覽器是否支持 HTML5 Geolocation API。 if () { alert(瀏覽器支持 HTML5 獲取地理位置信息服務(wù) )。 } else { alert(你的瀏覽器不支持 HTML5 來獲取地理位置信息。 )。 } 上面的示例代碼應(yīng)該在頁面加載時(shí)就應(yīng)該要被調(diào)用，如果瀏覽器支持 HTML5 獲取地理位置信息服務(wù)，對(duì) 的調(diào)用將返回該對(duì)象，否則將觸發(fā)錯(cuò)誤；當(dāng)瀏覽器不支持 HTML5 獲取地理位置信息服務(wù)時(shí)，可以提供一些替代文本，以提示用戶升級(jí)瀏覽器或安裝插件（如 Gears）來增強(qiáng)現(xiàn)有瀏覽器功能。 獲取當(dāng)前地理位置信息 （ 1）使用 getCurrentPosition 方法來獲取用戶地理位置信息 getCurrentPosition 方法返回用戶地理位置的經(jīng)緯度坐標(biāo)信息，而經(jīng)緯度坐標(biāo)有兩種 表示方式：十進(jìn)制格式（例如 ）和 DMS（ Degree Minute Second，角度）格式（例如 39176。54′ 20″）。 HTML5 Geolocation API 所返回的坐標(biāo)格式為十進(jìn)制格式。 （ 2） getCurrentPosition 方法的定義 void getCurrentPosition(onSuccess, onError, options)。 其中的各個(gè)參數(shù)的含義如下： 1) onSuccess 參數(shù)是返回獲取地理位置成功時(shí)需要完成什么的事件響應(yīng)回調(diào)函數(shù)； 2) 由于獲取位置的系統(tǒng)操作可能需要較長(zhǎng) 時(shí)間才能完成，用戶不希望在檢索位置時(shí)瀏覽器被鎖定，因此將該參數(shù)采用異步方式接收實(shí)際的位置信息。該回調(diào)函數(shù)只接受一個(gè)由瀏覽器返回的位置對(duì)象參數(shù)。 3) onError 是返回獲取地理位置失敗時(shí)將要完成什么的事件響應(yīng)回調(diào)函數(shù)； 4) oprtions 是一些可選屬性 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 5/27 頁 5 getCurrentPosition 方法中的第 3 個(gè)參數(shù) oprtions 可選屬性 oprtions 主要有如下三種值，它們?yōu)槭褂? JSON 對(duì)象表示的可選參數(shù)。 （ 1） enableHighAccuracy（ Boolean 類型，默認(rèn)值為 false） 是否嘗試更精確 地讀取緯度和經(jīng)度數(shù)據(jù)（但這個(gè)參數(shù)在很多設(shè)備上沒有用，而且將會(huì)導(dǎo)致設(shè)備花費(fèi)更多的時(shí)間和資源來確定位置，應(yīng)謹(jǐn)慎使用。所以大多數(shù)情況下都將它設(shè)為默認(rèn)值 false），而在移動(dòng)設(shè)備上，這可能要使用手機(jī)上的 GPS，這會(huì)消耗移動(dòng)設(shè)備更多的電量。 （ 2） maximumAge（單位為毫秒，默認(rèn)值為 0） 表示瀏覽器重新獲取位置信息的時(shí)間間隔，這意味著瀏覽器每次請(qǐng)求時(shí)必須立即重新計(jì)算位置。如果設(shè)置為 0，則必須在每次請(qǐng)求時(shí)查找一個(gè)新位置；而如果將 maximumAge設(shè)置為 Infinity，則總是使用一個(gè)最近緩存的位置數(shù)據(jù)并返回該位 置數(shù)據(jù)，而不重新請(qǐng)求新的位置數(shù)據(jù)。 （ 3） tmeout（單位為毫秒，默認(rèn)值為 0） 告訴瀏覽器獲取當(dāng)前位置信息所允許的最長(zhǎng)時(shí)間（但用戶選擇期間是不計(jì)時(shí)的），如果在這個(gè)時(shí)間段內(nèi)未完成，就會(huì)調(diào)用錯(cuò)誤處理程序。默認(rèn)值為 Infinity，即無窮大（無限制）。 getCurrentPosition 方法中的第 3 個(gè)參數(shù) oprtions 的應(yīng)用示例 （ 1）代碼示例 (onSuccess, onError, { enableHighAccuracy :true, timeout: 10000} )。 （ 2）代碼示例的功能說明 上面的代碼示例告訴 HTML5 Geolocation，當(dāng)獲取位置請(qǐng)求的處理時(shí)間超過 10s（ 1