HTML5中怎么使用地理位置實現(xiàn)定位功能

發(fā)布時間：2022-03-09 10:54:57 來源：億速云閱讀：225 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“HTML5中怎么使用地理位置實現(xiàn)定位功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

我們可以通過navigator.geolocation獲取地理位置對象，他提供了下列方法：

getCurrentPosition（回調(diào)，errorCallback，選項）：獲取當前位置;

watchPosition（回調(diào)，錯誤的選項）：開始監(jiān)控當前位置;

clearWatch（ID）：停止監(jiān)控當前位置

注：下面例子使用的瀏覽器是鉻，使用其他瀏覽器我不能保證運行結果和例子顯示的結果一致

1.當前電子雜志位置

我們將使用getCurrentPosition方法獲取當前位置，位置信息不會以結果的形式直接返回，我們需要使用回調(diào)函數(shù)進行處理。

復制代碼代碼如下：

<！DOCTYPE HTML>

<html>

<head>

<style>

表{border-colla ps e：塌陷；}

th，td {padding：4px；}

th {text-align：right; }

</ style>

</ head>

<body>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ tr>

</ table>

navigator.geolocation.getCurrentPosition（displayPosition）;

函數(shù)displayPosition（pos）{

var pr operties = ['經(jīng)度'，'緯度'，'高度'，'精度'，'altitudeAccuracy'，'航向'，'速度']];

for（var i = 0，len = properties.length; i <len; i ++）{

var value = pos.coords [properties [i]];

document.getElementById（properties [i]）。innerHTML =值;

}

document.getElementById（'timestamp'）。innerHTML = pos.timestamp;

}

</ script>

</ body>

</ html>

返回的位置對象包含兩個屬性，坐標：返回坐標信息；時間戳：獲取坐標信息的時間。其中坐標又包括以下屬性：緯度：緯度；經(jīng)度：經(jīng)度；海拔：高度；精度：精確度（米）； heightAccuracy：高度精確度（米）；航向：行進方向；速度：行進速度（米/秒）。

并不是所有的信息都會返回，這必須您攜帶瀏覽器的設備。像有GPS，加速器，羅盤的移動設備會返回大部分信息，家用電腦就不行了。

點擊允許，獲取坐標信息。

2.處理異常

現(xiàn)在我們介紹了getCurrentPosition的異常處理，他是通過使用errorCallback進行函數(shù)實現(xiàn)的。函數(shù)返回的參數(shù)error包含兩個屬性，代碼：錯誤類型的代碼；消息：錯誤信息。code包含三個值： 1：用戶沒有授權使用地理位置； 2：無法獲取坐標信息； 3：獲取信息超時。

下面我們看個例子：

復制代碼代碼如下：

<！DOCTYPE HTML>

<html>

<head>

<style>

表{邊界折疊：折疊；}

th，td {填充：4px；}

{文本對齊：右；}

< / style>

</ head>

<body>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ 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>

拒絕授權，運行結果：

3.使用

geoolocation可選參數(shù)項getCurrentPosition（callback，errorCallback，options）中的選項有如下參數(shù)可以使用，啟用高精度：使用最好的效果；超時時間：超時時間（毫秒）；最大年齡：指定緩存時間（毫秒）。我們來下下面的例子：

復制代碼代碼如下：

<！DOCTYPE HTML>

<html>

<head>

<style>

表{邊界折疊：折疊；}

th，td {填充：4px；}

{文本對齊：右；}

< / style>

</ head>

<body>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ tr>

<tr>

</ 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 <properties.length; 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方法實現(xiàn)位置變化的監(jiān)視，他的使用方法和getCurrentPosition一樣。

復制代碼代碼如下：

<！DOCTYPE HTML>

<html>

<head>

<style>

表{邊界折疊：折疊；}

th，td {填充：4px；}

{文本對齊：右；}

< / style>

</ head>

<body>

<tr>

</ tr>

<tr>

</ tr>

<tr>

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 <properties.length; 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>

當點擊Cancel Watch按鈕時，停止監(jiān)視。demo

“HTML5中怎么使用地理位置實現(xiàn)定位功能”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！

向AI問一下細節(jié)

HTML5中怎么使用地理位置實現(xiàn)定位功能

猜你喜歡

最新資訊

相關推薦

相關標簽