天氣窗件展示 -一個HTML5 地理位置應(yīng)用的例子

介紹

  定位及地理位置信息是LBS應(yīng)用的核心，和定位功能有所不同的是地理位置信息更關(guān)注如何得到有意義的信息。（例如一條街道的地址）

  從這邊文章里你會學(xué)到HTML5地理位置信息的各種功能。它能提供從用戶具體的位置到路徑導(dǎo)航的多種用途。通過IP地址、手機(jī)和基站間的無線通訊、 GPS定位，有很多種方式可以知道你在哪里。不過現(xiàn)在通過獲取客戶IP地址來定位的好日子已經(jīng)一去不復(fù)返了。

 HTML5有一套API可以允許客戶設(shè)備使用javascript有效的獲取地理位置信息（需iphone3/android2.0以上，或者使用桌面瀏覽器）。

 地理位置API支持下面的瀏覽器及手機(jī)：

• 
  

  • 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

安全性和精度

       當(dāng)需共享地理位置給遠(yuǎn)程服務(wù)器時，瀏覽器會通過彈出框或顯示到瀏覽器頂端的提示信息來要求您的授權(quán)，智能手機(jī)會在安裝相關(guān)APP時進(jìn)行提示。

     上面的infobar彈出框為非模態(tài)，在選擇其他瀏覽頁面后會消失。沒有方法可以繞過這種要求授權(quán)的infobar，infobar的這種特性保證了只有經(jīng)過你的授權(quán)瀏覽器才可以共享位置信息。作為客戶來說可以了解到，

•      被告知哪個網(wǎng)站想獲取你的地址位置

•      可以選擇共享或不共享

•      可保存針對此選項的默認(rèn)選擇，該網(wǎng)站的類似提示不會再出現(xiàn)

     有多種技術(shù)可用于獲取用戶的位置，每種技術(shù)有不同的精確度。桌面瀏覽器可能會使用WIFI(精確度20米）或者IP來定位（只能精確到城市級別且可能會有誤報）。移動設(shè)備傾向于使用三角定位技術(shù)例如GPS（精確

度10米僅限戶外）、WIFI和GSM/CDMA（精確度1000米）。

     天氣窗件

     下面這個例子使用了HTML地址位置API及OpenWeather API。該例子在頁面展示部分比較簡單，也沒有充分使用到OpenWeather API的全部功能?，F(xiàn)在是這個窗件的截圖：

     從html部分開始。html引用了第三方的javascript和CSS，在頁面初始化階段調(diào)用了javascript方法getLocation如下：

     使用了不同CSS style的table：

     在table里面使用了div，隨后可以使用javascript覆寫：

     隨后使用免費(fèi)的OpenWeather API獲取Jason格式的天氣信息并展示出來。下面定義了一些全局變量，包括獲取獲取當(dāng)前天氣、隨后5天天氣預(yù)測、及圖片的靜態(tài)URL。

     在getLocation方法里面需判斷當(dāng)前瀏覽器是否支持獲取地理位置API，

     如瀏覽器不支持則會顯示如下的信息，

     Geolocation API提供兩種方法獲取用戶的地址位置信息，getCurrentPosition和watchPosition。隨后會簡短討論一下兩個方法的不同之處。兩個方法都會立即返回，然后使用異步的方式嘗試獲取用戶的位置。且兩者都使用相同數(shù)量的參數(shù)：

1.      successCallback - 方法成功返回時調(diào)用，如下圖的getCurrentWeatherData方法。

2.      errorCallback - 出現(xiàn)錯誤時調(diào)用，如下的displayError方法。

3.      可選 - 一些可選參數(shù),

     a. enableHighAccuracy - 默認(rèn)值為false。該參數(shù)設(shè)置為true時響應(yīng)時間會變慢。如果是在移動設(shè)備使用的話會使用GPS，同時導(dǎo)致耗電量增加。

     b. timeout - 默認(rèn)為0，表示為無限制。用來指定等待響應(yīng)的最大時間。這里我們設(shè)置timeout時間如下：

     c.maximumAge - 單位毫秒默認(rèn)值為0。用來指定應(yīng)用所能接受的緩存位置信息的最長時間。0表示獲取立即獲取新的位置信息。

     在errorCallback方法里，我們使用錯誤代碼對應(yīng)相應(yīng)的錯誤信息：

     摘要描述一下以上步驟：

•      判斷是否支持獲取地理位置信息API。

•      如果支持的話，調(diào)用getCurrentPosition方法，否則調(diào)用errorcallback方法。

•      如果getCurrentPosition方法調(diào)用成功，則返回結(jié)果被指定的方法進(jìn)行處理。（getCurrentWeatherData）

•      getCurrentWeatherData方法對返回結(jié)果postion對象進(jìn)行進(jìn)一步處理。

     getCurrentPosition和watchPosition

     watchPosition方法在位置改變時會進(jìn)行通知。這在一些位置驅(qū)動的Apps里面非常有用，可以用來跟蹤用戶的移動軌跡。而getCurrentPostion則為一次性返回。watchPosition方法會返回watchId，當(dāng)不需要進(jìn)行持續(xù)的位置更新時可調(diào)用clearWatch方法。

     Position

     上文提到的Position對象包含以下屬性：

     調(diào)用OpenWeather API的URL使用Position對象的相關(guān)屬性如下：

     我們使用XMLHttpRequest對象和OpenWeather服務(wù)器進(jìn)行數(shù)據(jù)交換。當(dāng)請求數(shù)據(jù)發(fā)送后，我們希望根據(jù)響應(yīng)執(zhí)行一些操作。onreadystatechange事件在XMLHttpRequest對象的readyState屬性每次改變后都會被觸發(fā)，定義在該事件上的方法會被自動調(diào)用。如下是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”表示頁面沒有找到。當(dāng)readyState值為4且state的值為200時，表示響應(yīng)正確返回。解析返回的responseText對象為Json對象，隨后調(diào)用Parse方法解析Json對象轉(zhuǎn)換成要顯示的內(nèi)容。

     現(xiàn)在可以使用XMLHttpRequest對象的open及send方法了：

     處理Json對象

     可使用Json.parse方法解析并通過“.”或“[]”訪問Json對象。Json和XML相似的地方是它是自描述的、分層并通過使用XmlHttpRequest獲取，可以使用多種語言進(jìn)行解析。和XML不同的地方是，Json不需要使用Xml解析器進(jìn)行解析，直接使用javascript即可。Json數(shù)據(jù)為名字/值對格式，通過逗號分隔。使用大括號分隔對象，并使用中括號來保存數(shù)組。下面是一個從OpenWeather API返回的Json對象的例子：

       如下展示了如何使用Json對象展示返回的天氣信息：