介紹

益陽網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),益陽網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為益陽成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務(wù)好的益陽做網(wǎng)站的公司定做！

     

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

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

 HTML5有一套API可以允許客戶設(shè)備使用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

安全性和精度

     

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

          

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

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

•      可以選擇共享或不共享

•      可保存針對此選項的默認選擇，該網(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覆寫：

     

     

     隨后使用免費的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 - 默認值為false。該參數(shù)設(shè)置為true時響應(yīng)時間會變慢。如果是在移動設(shè)備使用的話會使用GPS，同時導(dǎo)致耗電量增加。

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

     

     

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

       

     

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

     

     摘要描述一下以上步驟：

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

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

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

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

     getCurrentPosition和watchPosition

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

     

     Position

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

     

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

     

     我們使用XMLHttpRequest對象和OpenWeather服務(wù)器進行數(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獲取，可以使用多種語言進行解析。和XML不同的地方是，Json不需要使用Xml解析器進行解析，直接使用javascript即可。Json數(shù)據(jù)為名字/值對格式，通過逗號分隔。使用大括號分隔對象，并使用中括號來保存數(shù)組。下面是一個從OpenWeather API返回的Json對象的例子：

     

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

     

     

     

     

網(wǎng)頁標題：天氣窗件展示-一個HTML5地理位置應(yīng)用的例子
文章起源：http://jinyejixie.com/article22/ppeicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站策劃、虛擬主機、用戶體驗、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)