close
文章出處
定位及地理位置信息是LBS應用的核心，和定位功能有所不同的是地理位置信息更關注如何得到有意義的信息。（例如一條街道的地址）
從這邊文章里你會學到HTML5地理位置信息的各種功能。它能提供從用戶具體的位置到路徑導航的多種用途。
通過IP地址、手機和基站間的無線通訊、 GPS定位，有很多種方式可以知道你在哪里。不過現在通過獲取客戶IP地址來定位的好日子已經一去不復返了。
HTML5有一套API可以允許客戶設備使用javascript有效的獲取地理位置信息（需iphone3/android2.0以上，或者使用桌面瀏覽器）。
地理位置API支持下面的瀏覽器及手機：
-
- Google Chrome 5.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 5.0
- Opera 16.0
- Iphone 3.0
- Android 2.0
- Opera Mobile 10
- Blackberry OS 6.0
安全性和精度
當需共享地理位置給遠程服務器時，瀏覽器會通過彈出框或顯示到瀏覽器頂端的提示信息來要求您的授權，智能手機會在安裝相關APP時進行提示。
上面的infobar彈出框為非模態，在選擇其他瀏覽頁面后會消失。沒有方法可以繞過這種要求授權的infobar，infobar的這種特性保證了只有經過你的授權瀏覽器才可以共享位置信息。作為客戶來說可以了解到，
- 被告知哪個網站想獲取你的地址位置
- 可以選擇共享或不共享
- 可保存針對此選項的默認選擇，該網站的類似提示不會再出現
有多種技術可用于獲取用戶的位置，每種技術有不同的精確度。桌面瀏覽器可能會使用WIFI(精確度20米）或者IP來定位（只能精確到城市級別且可能會有誤報）。移動設備傾向于使用三角定位技術例如GPS（精確
度10米僅限戶外）、WIFI和GSM/CDMA（精確度1000米）。
天氣窗件
下面這個例子使用了HTML地址位置API及OpenWeather API。該例子在頁面展示部分比較簡單，也沒有充分使用到OpenWeather API的全部功能。現在是這個窗件的截圖：
從html部分開始。html引用了第三方的javascript和CSS，在頁面初始化階段調用了javascript方法getLocation如下：
使用了不同CSS style的table：
在table里面使用了div，隨后可以使用javascript覆寫：
隨后使用免費的OpenWeather API獲取Jason格式的天氣信息并展示出來。下面定義了一些全局變量，包括獲取獲取當前天氣、隨后5天天氣預測、及圖片的靜態URL。
在getLocation方法里面需判斷當前瀏覽器是否支持獲取地理位置API，
如瀏覽器不支持則會顯示如下的信息，
Geolocation API提供兩種方法獲取用戶的地址位置信息，getCurrentPosition和watchPosition。隨后會簡短討論一下兩個方法的不同之處。兩個方法都會立即返回，然后使用異步的方式嘗試獲取用戶的位置。且兩者都使用相同數量的參數：
- successCallback - 方法成功返回時調用，如下圖的getCurrentWeatherData方法。
- errorCallback - 出現錯誤時調用，如下的displayError方法。
- 可選 - 一些可選參數,
a. enableHighAccuracy - 默認值為false。該參數設置為true時響應時間會變慢。如果是在移動設備使用的話會使用GPS，同時導致耗電量增加。
b. timeout - 默認為0，表示為無限制。用來指定等待響應的最大時間。這里我們設置timeout時間如下：
c.maximumAge - 單位毫秒默認值為0。用來指定應用所能接受的緩存位置信息的最長時間。0表示獲取立即獲取新的位置信息。
在errorCallback方法里，我們使用錯誤代碼對應相應的錯誤信息：
摘要描述一下以上步驟：
- 判斷是否支持獲取地理位置信息API。
- 如果支持的話，調用getCurrentPosition方法，否則調用errorcallback方法。
- 如果getCurrentPosition方法調用成功，則返回結果被指定的方法進行處理。（getCurrentWeatherData）
- getCurrentWeatherData方法對返回結果postion對象進行進一步處理。
getCurrentPosition和watchPosition
watchPosition方法在位置改變時會進行通知。這在一些位置驅動的Apps里面非常有用，可以用來跟蹤用戶的移動軌跡。而getCurrentPostion則為一次性返回。watchPosition方法會返回watchId，當不需要進行持續的位置更新時可調用clearWatch方法。
Position
上文提到的Position對象包含以下屬性：
調用OpenWeather API的URL使用Position對象的相關屬性如下：
我們使用XMLHttpRequest對象和OpenWeather服務器進行數據交換。當請求數據發送后，我們希望根據響應執行一些操作。onreadystatechange事件在XMLHttpRequest對象的readyState屬性每次改變后都會被觸發，定義在該事件上的方法會被自動調用。如下是readyState屬性的值列表：
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
state屬性返回“200”表示OK，“404”表示頁面沒有找到。當readyState值為4且state的值為200時，表示響應正確返回。解析返回的responseText對象為Json對象，隨后調用Parse方法解析Json對象轉換成要顯示的內容。
現在可以使用XMLHttpRequest對象的open及send方法了：
處理Json對象
可使用Json.parse方法解析并通過“.”或“[]”訪問Json對象。Json和XML相似的地方是它是自描述的、分層并通過使用XmlHttpRequest獲取，可以使用多種語言進行解析。和XML不同的地方是，Json不需要使用Xml解析器進行解析，直接使用javascript即可。Json數據為名字/值對格式，通過逗號分隔。使用大括號分隔對象，并使用中括號來保存數組。下面是一個從OpenWeather API返回的Json對象的例子：
如下展示了如何使用Json對象展示返回的天氣信息：
 |
不含病毒。www.avast.com |
全站熱搜
留言列表
