本篇內(nèi)容介紹了“HTML5中怎么使用地理位置實(shí)現(xiàn)定位功能”的有關(guān)知識(shí),在實(shí)際案例的操作過(guò)程中,不少人都會(huì)遇到這樣的困境,接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的瑪納斯網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
我們可以通過(guò)navigator.geolocation獲取地理位置對(duì)象,他提供了下列方法:
getCurrentPosition(回調(diào),errorCallback,選項(xiàng)):獲取當(dāng)前位置;
watchPosition(回調(diào),錯(cuò)誤的選項(xiàng)):開(kāi)始監(jiān)控當(dāng)前位置;
clearWatch(ID):停止監(jiān)控當(dāng)前位置
注:下面例子使用的瀏覽器是鉻,使用其他瀏覽器我不能保證運(yùn)行結(jié)果和例子顯示的結(jié)果一致
1.當(dāng)前電子雜志位置
我們將使用getCurrentPosition方法獲取當(dāng)前位置,位置信息不會(huì)以結(jié)果的形式直接返回,我們需要使用回調(diào)函數(shù)進(jìn)行處理。
復(fù)制代碼代碼如下:
<!DOCTYPE HTML>
示例 title>表{border-colla ps e:塌陷;}
th,td {padding:4px;}
th {text-align:right; }
style>
head>
經(jīng)度: th> | - td> | 緯度: th> | - td> tr> |
---|
海拔高度: th> | - td> | 準(zhǔn)確性: th> | - td> tr> |
---|
海拔精度: th> | - td> | 標(biāo)題: th> | - td> tr> |
---|
速度: th> | - td> | 時(shí)間戳: th> | - td> tr> table> navigator.geolocation.getCurrentPosition(displayPosition); 函數(shù)displayPosition(pos){ var pr operties = ['經(jīng)度','緯度','高度','精度','altitudeAccuracy','航向','速度']]; for(var i = 0,len = properties.length; i var value = pos.coords [properties [i]]; document.getElementById(properties [i])。innerHTML =值; } document.getElementById('timestamp')。innerHTML = pos.timestamp; } script> body> html> 返回的位置對(duì)象包含兩個(gè)屬性,坐標(biāo):返回坐標(biāo)信息;時(shí)間戳:獲取坐標(biāo)信息的時(shí)間。其中坐標(biāo)又包括以下屬性:緯度:緯度;經(jīng)度:經(jīng)度;海拔:高度;精度:精確度(米); heightAccuracy:高度精確度(米);航向:行進(jìn)方向;速度:行進(jìn)速度(米/秒)。 并不是所有的信息都會(huì)返回,這必須您攜帶瀏覽器的設(shè)備。像有GPS,加速器,羅盤(pán)的移動(dòng)設(shè)備會(huì)返回大部分信息,家用電腦就不行了。 點(diǎn)擊允許,獲取坐標(biāo)信息。 2.處理異常 現(xiàn)在我們介紹了getCurrentPosition的異常處理,他是通過(guò)使用errorCallback進(jìn)行函數(shù)實(shí)現(xiàn)的。函數(shù)返回的參數(shù)error包含兩個(gè)屬性,代碼:錯(cuò)誤類(lèi)型的代碼;消息:錯(cuò)誤信息。code包含三個(gè)值: 1:用戶沒(méi)有授權(quán)使用地理位置; 2:無(wú)法獲取坐標(biāo)信息; 3:獲取信息超時(shí)。 下面我們看個(gè)例子: 復(fù)制代碼代碼如下: <!DOCTYPE HTML> 示例 title>表{邊界折疊:折疊;} th,td {填充:4px;} {文本對(duì)齊:右;} < / style> head> 經(jīng)度: th> | - td> | 緯度: th> | - td> tr> |
---|
海拔高度: th> | - td> | 準(zhǔn)確性:< / th> | - td> tr> |
---|
高度精度: th> | - td> | 標(biāo)題: th> | - td> tr> |
---|
速度: th> | - td> | 時(shí)間戳: th> | - td> tr> |
---|
錯(cuò)誤代碼: th> | - td> | 錯(cuò)誤消息: th> | - td> tr> table> navigator.geolocation.getCurrentPosition(displayPosition,handleError); 函數(shù)displayPosition(pos){ var properties = [“經(jīng)度”,“緯度”,“海拔”,“ document.getElementById(properties [i])。innerHTML =值; } document.getElementById(“ timestamp”)。innerHTML = pos.timestamp; } 函數(shù)handleError(err){ document.getElementById(“ errcode”)。innerHTML = err.code; document.getElementById(“ errmessage”)。innerHTML = err.message; } script> body> html> 拒絕授權(quán),運(yùn)行結(jié)果: 3.使用 geoolocation可選參數(shù)項(xiàng)getCurrentPosition(callback,errorCallback,options)中的選項(xiàng)有如下參數(shù)可以使用,啟用高精度:使用最好的效果;超時(shí)時(shí)間:超時(shí)時(shí)間(毫秒);最大年齡:指定緩存時(shí)間(毫秒)。我們來(lái)下下面的例子: 復(fù)制代碼代碼如下: <!DOCTYPE HTML> 示例 title>表{邊界折疊:折疊;} th,td {填充:4px;} {文本對(duì)齊:右;} < / style> head> 經(jīng)度: th> | - td> | 緯度: th> | - td> tr> |
---|
海拔高度: th> | - td> | 準(zhǔn)確性:< / th> | - td> tr> |
---|
高度精度: th> | - td> | 標(biāo)題: th> | - td> tr> |
---|
速度: th> | - td> | 時(shí)間戳: th> | - td> tr> |
---|
錯(cuò)誤代碼: th> | - td> | 錯(cuò)誤消息: th> | - td> tr> table> var options = { enableHighAccuracy:false, timeout:2000, maximumAge:30000 }; navigator.geolocation.getCurrentPosition(displayPosition,handleError,options); var屬性= [“經(jīng)度”,“緯度”,“高度”,“精度”,“ altitudeAccuracy”,“航向”,“速度”]; for(var i = 0; i var value = pos.coords [properties [i]]; document.getElementById(properties [i])。innerHTML =值; } document.getElementById(“ timestamp”)。innerHTML = pos.timestamp; } 函數(shù)handleError(err){ document.getElementById(“ errcode”)。innerHTML = err.code; document.getElementById(“ errmessage”)。innerHTML = err.message; } script> body> html> 4.監(jiān)視位置變化 下面我們介紹使用watchPosition方法實(shí)現(xiàn)位置變化的監(jiān)視,他的使用方法和getCurrentPosition一樣。 復(fù)制代碼代碼如下: <!DOCTYPE HTML> 示例 title>表{邊界折疊:折疊;} th,td {填充:4px;} {文本對(duì)齊:右;} < / style> head> 經(jīng)度: th> | - td> | 緯度: th> | - td> tr> |
---|
海拔高度: th> | - td> | 準(zhǔn)確性:< / th> | - td> tr> |
---|
高度精度: th> | - td> | 標(biāo)題: th> var watchID = navigator.geolocation.watchPosition(displayPosition,handleError,options); document.getElementById(“ pressme”)。onclick =函數(shù)(e){ navigator.geolocation.clearWatch(watchID); }; 函數(shù)displayPosition(pos){ var properties = [“經(jīng)度”,“緯度”,“海拔”,“精度”,“ altitudeAccuracy”,“航向”,“速度”]; for(var i = 0; i var value = pos.coords [properties [i]]; document.getElementById(properties [i])。innerHTML =值; } document.getElementById(“ timestamp”)。innerHTML = pos.timestamp; } 函數(shù)handleError(err){ document.getElementById(“ errcode”)。innerHTML = err.code; document.getElementById(“ errmessage”)。innerHTML = err.message; } script> body> 當(dāng)點(diǎn)擊Cancel Watch按鈕時(shí),停止監(jiān)視。demo “HTML5中怎么使用地理位置實(shí)現(xiàn)定位功能”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
分享文章:HTML5中怎么使用地理位置實(shí)現(xiàn)定位功能
瀏覽路徑:http://weahome.cn/article/pojhpg.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220(工作日)
18980820575(7×24)
-
提交需求
-
返回頂部
|
---|
|
---|
|
---|
|
---|