版權(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ù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025-2030全球溫濕度氣候試驗(yàn)箱行業(yè)調(diào)研及趨勢(shì)分析報(bào)告
- 2025年全球及中國(guó)光學(xué)有機(jī)硅膠行業(yè)頭部企業(yè)市場(chǎng)占有率及排名調(diào)研報(bào)告
- 2025-2030全球電子母豬喂料器行業(yè)調(diào)研及趨勢(shì)分析報(bào)告
- 2025年全球及中國(guó)熟食冷藏展示柜行業(yè)頭部企業(yè)市場(chǎng)占有率及排名調(diào)研報(bào)告
- 房屋地基買賣合同
- 2025合同模板出國(guó)勞務(wù)合同范本
- 2025房屋借款合同范本
- 2025北京市前期物業(yè)服務(wù)合同模板
- 剪輯師聘用合同資訊
- 提升殘疾人的信息獲取與溝通能力
- 跨學(xué)科主題學(xué)習(xí)2-探索太空逐夢(mèng)航天 說(shuō)課稿-2024-2025學(xué)年粵人版地理七年級(jí)上冊(cè)
- 13J103-7《人造板材幕墻》
- 上海高考英語(yǔ)詞匯手冊(cè)列表
- PDCA提高患者自備口服藥物正確堅(jiān)持服用落實(shí)率
- 上海石油化工股份有限公司6181乙二醇裝置爆炸事故調(diào)查報(bào)告
- 家譜人物簡(jiǎn)介(優(yōu)選12篇)
- 品管部崗位職責(zé)20篇
- 2023年中智集團(tuán)下屬中智股份公司招聘筆試題庫(kù)及答案解析
- GA 1409-2017警用服飾硬式肩章
- 小兒垂釣 （課件）（14張）
- 嘉吉樂恩貝1-FarLactation課件
評(píng)論
0/150
提交評(píng)論