介紹

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

     

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

  從這邊文章里你會(huì)學(xué)到HTML5地理位置信息的各種功能。它能提供從用戶具體的位置到路徑導(dǎo)航的多種用途。通過(guò)IP地址、手機(jī)和基站間的無(wú)線通訊、 GPS定位，有很多種方式可以知道你在哪里。不過(guò)現(xiàn)在通過(guò)獲取客戶IP地址來(lái)定位的好日子已經(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ù)器時(shí)，瀏覽器會(huì)通過(guò)彈出框或顯示到瀏覽器頂端的提示信息來(lái)要求您的授權(quán)，智能手機(jī)會(huì)在安裝相關(guān)APP時(shí)進(jìn)行提示。

          

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

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

•      可以選擇共享或不共享

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

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

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

     天氣窗件

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

     

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

       

     使用了不同CSS style的table：

     

     

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

     

     

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

     

     

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

     

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

     

     

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

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

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

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

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

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

     

     

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

       

     

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

     

     摘要描述一下以上步驟：

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

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

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

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

     getCurrentPosition和watchPosition

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

     

     Position

     上文提到的Position對(duì)象包含以下屬性：

     

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

     

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

     

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

     

     處理Json對(duì)象

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

     

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

     

     

     

     

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

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

廣告

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