第28課-HTML5地理位置定位API接口開發(fā)_第1頁(yè)
第28課-HTML5地理位置定位API接口開發(fā)_第2頁(yè)
第28課-HTML5地理位置定位API接口開發(fā)_第3頁(yè)
第28課-HTML5地理位置定位API接口開發(fā)_第4頁(yè)
第28課-HTML5地理位置定位API接口開發(fā)_第5頁(yè)
已閱讀5頁(yè)，還剩18頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

內(nèi)容摘要①地理位置定位原理與介紹②HTML5中地理位置定位的方法③HTML5中地理定位實(shí)例HTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

Team地理位置定位原理與介紹地理位置定位的幾種方式：IP地址，GPS，Wifi，GSM/CDMA地理位置獲取流程：1、用戶打開需要獲取地理位置的web應(yīng)用。2、應(yīng)用向?yàn)g覽器請(qǐng)求地理位置，瀏覽器彈出詢問(wèn)，詢問(wèn)用戶是否共享地理位置。3、假設(shè)用戶允許，瀏覽器從設(shè)別查詢相關(guān)信息。4、瀏覽器將相關(guān)信息發(fā)送到一個(gè)信任的位置服務(wù)器，服務(wù)器返回具體的地理位置。HTML5地理地位的實(shí)現(xiàn)：實(shí)現(xiàn)基于瀏覽器（無(wú)需后端支持）獲取用戶的地理位置技術(shù)精確定位用戶的地理位置(精度最高達(dá)10m之內(nèi)，依賴設(shè)備)持續(xù)追蹤用戶的地理位置與Google

Map、或者Baidu

Map交互呈現(xiàn)位置信息。HTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)HTML5中地理位置定位的方法1.

關(guān)于Geolocation對(duì)象Geolocation

API用于將用戶當(dāng)前地理位置信息共享給信任的站點(diǎn)，這涉及用戶的隱私安全問(wèn)題，所以當(dāng)一個(gè)站點(diǎn)需要獲取用戶的當(dāng)前地理位置，瀏覽器會(huì)提示用戶是“允許”or“拒絕”。先看看哪些瀏覽器支持Geolocation

API：IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

TeamgetCurrentPosition(success,error,option)方法最多可以有三個(gè)參數(shù)：第一個(gè)參數(shù)是成功獲取位置信息的回調(diào)函數(shù)，它是方法唯一必須的參數(shù)；第二個(gè)參數(shù)用于捕獲獲取位置信息出錯(cuò)的情況，第三個(gè)參數(shù)是配置項(xiàng)。HTML5中地理位置定位的方法Geolocation

API存在于navigator對(duì)象中，只包含3個(gè)方法：1、getCurrentPosition

//當(dāng)前位置2、watchPosition3、clearWatch//監(jiān)視位置//清除監(jiān)視（第27講）

HTML5地理位置定位API接口開發(fā)HTML5中地理位置定位的方法navigator.geolocation.getCurrentPosition(

function(p)

{var

map="維度"+p.coords.latitude+"經(jīng)度"+p.coords.longitude;alert(var);});p.address.countryp.address.

regionp.address.city緯度經(jīng)度國(guó)家省份城市accuracy準(zhǔn)確角altitude海拔高度altitudeAcuracy海拔高度的精確度heading行進(jìn)方向speed地面的速度Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)HTML5中地理位置定位的方法navigator.geolocation.getCurrentPosition(

…

,

function(error){switch(error.code){case

error.TIMEOUT

:alert("連接超時(shí)，請(qǐng)重試");

break;case

error.PERMISSION_DENIED

:alert("您拒絕了使用位置共享服務(wù)，查詢已取消");

break;case

error.POSITION_UNAVAILABLE

:alert("，抱歉，暫時(shí)無(wú)法為您所在的星球提供位置服務(wù)");

break;}});省略第一個(gè)參數(shù)Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)HTML5中地理位置定位的方法navigator.geolocation.getCurrentPosition(

…

,

…

,

option);option配置項(xiàng),第三個(gè)參數(shù)是一個(gè)對(duì)象，該對(duì)象影響了獲取位置時(shí)的一些細(xì)節(jié)。enableHighAccuracy，它將告訴瀏覽器是否啟用高精度設(shè)備，所謂的高精度設(shè)備包含但不局限于前面所提到的GPS和WIFI，值為true的時(shí)候，瀏覽器會(huì)嘗試啟用這些設(shè)備，默認(rèn)指為true。timeout，超時(shí)，獲取位置信息時(shí)超出設(shè)定的這個(gè)時(shí)長(zhǎng)，將會(huì)觸發(fā)錯(cuò)誤，捕獲錯(cuò)誤的函數(shù)將被調(diào)用，并且錯(cuò)誤碼指向TIMEOUT。這樣我們嘗試修改調(diào)用getCurrentPosition時(shí)傳遞的參數(shù)省略第一個(gè),第二個(gè)參數(shù)Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

TeamHTML5中地理位置定位的方法watchPosition像一個(gè)追蹤器與clearWatch成對(duì)。watchPosition與clearWatch有點(diǎn)像setInterval和clearInterval的工作方式。var

watchPositionId

=navigator.geolocation.watchPosition(success_callback,

error_callback,options);navigator.geolocation.clearWatch(watchPositionId

);只針對(duì)移動(dòng)設(shè)備HTML5地理位置定位API接口開發(fā)HTML5+百度地圖||

地理定位Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

TeamHTML5中地理位置實(shí)例1.開發(fā)工具的安裝與使用安裝phpStudy:該程序包集成最新的Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+ZendOptimizer+ZendLoader，一次性安裝，無(wú)須配置即可使用，是非常方便、好用的PHP調(diào)試環(huán)境。該程序綠色小巧簡(jiǎn)易迷你僅有35M，有專門的控制面板。安裝好后啟動(dòng)phpStudy服務(wù)，然后在瀏覽器中輸入“http://localhost”測(cè)試服務(wù)器是否配置成功。安裝Notepad++:用于編輯HTML代碼安裝支持定位服務(wù)的瀏覽器：如果電腦上的360瀏覽器無(wú)法支持，可以安裝所給素材中的google瀏覽器。HTML5地理位置定位API接口開發(fā)HTML5中地理位置實(shí)例2.代碼編寫與調(diào)試</title>HTML語(yǔ)法格式<html><head><title></head><body></body></html>在Notepad++中編輯基本的HTML代碼Network

Optimization

Expert

TeamNetwork

Optimization

Expert

Team中文轉(zhuǎn)碼方式網(wǎng)頁(yè)標(biāo)題頁(yè)面中的三個(gè)文本框設(shè)置地圖所在的顯示區(qū)域HTML5地理位置定位API接口開發(fā)HTML5中地理位置實(shí)例2.代碼編寫與調(diào)試設(shè)置三個(gè)文本框的樣式外觀在<head></head>標(biāo)簽之間插入CSS樣式的代碼，代碼如下所示：Network

Optimization

Expert

TeamHTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

TeamHTML5中地理位置實(shí)例2.代碼編寫與調(diào)試調(diào)用百度地圖：在<head></head>標(biāo)簽之間插入<script>腳本，<script>腳本的基本語(yǔ)法形式使用外部<script>腳本<script

type="text/javascript"src="……"></script>自定義<script>腳本<script

type="text/javascript">……………………</script>HTML5地理位置定位API接口開發(fā)HTML5中地理位置實(shí)例2.代碼編寫與調(diào)試本案例中，一共有三個(gè)script腳本，前兩個(gè)是直接調(diào)用百度的，第三個(gè)是自定義Network

Optimization

Expert

Team調(diào)用百度地圖Network

Optimization

Expert

Team調(diào)用百度地圖中的地址解析HTML5地理位置定位API接口開發(fā)Network

Optimization

Expert

TeamHTML5中地理位置實(shí)例2.代碼編寫與調(diào)試：自定義script腳本代碼分解①初始化，測(cè)試瀏覽器是否支持地理位置定位②定位成功后獲取GPS坐標(biāo)信息：經(jīng)緯度③將GPS坐標(biāo)位置轉(zhuǎn)換為GPS地理位置，并顯示地圖④將GPS坐標(biāo)位置轉(zhuǎn)換為百度坐標(biāo)地理位置初始化，測(cè)試瀏覽器是否支持地理位置定位Network

Optimization

Expert

Team定位成功后獲取GPS

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論