溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“HTML5中怎么使用地理位置實現定位功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
我們可以通過navigator.geolocation獲取地理位置對象，他提供了下列方法：
getCurrentPosition（回調，errorCallback，選項）：獲取當前位置;
watchPosition（回調，錯誤的選項）：開始監控當前位置;
clearWatch（ID）：停止監控當前位置
注：下面例子使用的瀏覽器是鉻，使用其他瀏覽器我不能保證運行結果和例子顯示的結果一致
1.當前電子雜志位置
我們將使用getCurrentPosition方法獲取當前位置，位置信息不會以結果的形式直接返回，我們需要使用回調函數進行處理。
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title>示例</ title>
<style>
表{border-colla ps e：塌陷；}
th，td {padding：4px；}
th {text-align：right; }
</ style>
</ head>
<body>
<table border =“ 1”>
<tr>
<th>經度：</ th>
<td id =“ longitude”>-</ td>
<th>緯度： </ th>
<td id =“ latitude”>-</ td>
</ tr>
<tr>
<th>海拔高度：</ th>
<td id =“ altitude”>-</ td>
<th>準確性：</ th>
<td id =“精度“>-</ td>
</ tr>
<tr>
<th>海拔精度：</ th>
<td id =” altitudeAccuracy“>-</ td>
<th>標題：</ th>
<td id =“ heading”>-</ td>
</ tr>
<tr>
<th>速度：</ th>
<td id =“ speed”>-</ td>
<th>時間戳：</ th>
<td id =“ timestamp”>-</ td>
</ tr>
</ table>
<script>
navigator.geolocation.getCurrentPosition（displayPosition）;
函數displayPosition（pos）{
var pr operties = ['經度'，'緯度'，'高度'，'精度'，'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>
返回的位置對象包含兩個屬性，坐標：返回坐標信息；時間戳：獲取坐標信息的時間。其中坐標又包括以下屬性：緯度：緯度；經度：經度；海拔：高度；精度：精確度（米）； heightAccuracy：高度精確度（米）；航向：行進方向；速度：行進速度（米/秒）。
并不是所有的信息都會返回，這必須您攜帶瀏覽器的設備。像有GPS，加速器，羅盤的移動設備會返回大部分信息，家用電腦就不行了。
點擊允許，獲取坐標信息。
2.處理異常
現在我們介紹了getCurrentPosition的異常處理，他是通過使用errorCallback進行函數實現的。函數返回的參數error包含兩個屬性，代碼：錯誤類型的代碼；消息：錯誤信息。code包含三個值： 1：用戶沒有授權使用地理位置； 2：無法獲取坐標信息； 3：獲取信息超時。
下面我們看個例子：
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title>示例</ title>
<style>
表{邊界折疊：折疊；}
th，td {填充：4px；}
{文本對齊：右；}
< / style>
</ head>
<body>
<table border =“ 1”>
<tr>
<th>經度：</ th>
<td id =“ longitude”>-</ td>
<th>緯度：</ th>
<td id =“ latitude”>-</ td>
</ tr>
<tr>
<th>海拔高度：</ th>
<td id =“ altitude”>-</ td>
<th>準確性：< / th>
<td id =“ accuracy”>-</ td>
</ tr>
<tr>
<th>高度精度：</ th>
<td id =“ altitudeAccuracy”>-</ td>
<th>標題：</ th>
<td id =“ heading”>-</ td>
</ tr>
<tr>
<th>速度：</ th>
<td id =“ speed”>-</ td>
<th>時間戳：</ th>
<td id =“ timestamp”>-</ td>
</ tr>
<tr>
<th>錯誤代碼：</ th>
<td id =“ errcode”>-</ td>
<th>錯誤消息：</ th>
<td id =“ errmessage”>-</ td>
</ tr>
</ table>
<script>
navigator.geolocation.getCurrentPosition（displayPosition，handleError）;
函數displayPosition（pos）{
var properties = [“經度”，“緯度”，“海拔”，“
document.getElementById（properties [i]）。innerHTML =值；
}
document.getElementById（“ timestamp”）。innerHTML = pos.timestamp;
}
函數handleError（err）{
document.getElementById（“ errcode”）。innerHTML = err.code;
document.getElementById（“ errmessage”）。innerHTML = err.message;
}
</ script>
</ body>
</ html>
拒絕授權，運行結果：
3.使用
geoolocation可選參數項getCurrentPosition（callback，errorCallback，options）中的選項有如下參數可以使用，啟用高精度：使用最好的效果；超時時間：超時時間（毫秒）；最大年齡：指定緩存時間（毫秒）。我們來下下面的例子：
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title>示例</ title>
<style>
表{邊界折疊：折疊；}
th，td {填充：4px；}
{文本對齊：右；}
< / style>
</ head>
<body>
<table border =“ 1”>
<tr>
<th>經度：</ th>
<td id =“ longitude”>-</ td>
<th>緯度：</ th>
<td id =“ latitude”>-</ td>
</ tr>
<tr>
<th>海拔高度：</ th>
<td id =“ altitude”>-</ td>
<th>準確性：< / th>
<td id =“ accuracy”>-</ td>
</ tr>
<tr>
<th>高度精度：</ th>
<td id =“ altitudeAccuracy”>-</ td>
<th>標題：</ th>
<td id =“ heading”>-</ td>
</ tr>
<tr>
<th>速度：</ th>
<td id =“ speed”>-</ td>
<th>時間戳：</ th>
<td id =“ timestamp”>-</ td>
</ tr>
<tr>
<th>錯誤代碼：</ th>
<td id =“ errcode”>-</ td>
<th>錯誤消息：</ th>
<td id =“ errmessage”>-</ td>
</ tr>
</ table>
<script>
var options = {
enableHighAccuracy：false，
timeout：2000，
maximumAge：30000
};
navigator.geolocation.getCurrentPosition（displayPosition，handleError，options）;
var屬性= [“經度”，“緯度”，“高度”，“精度”，“ 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;
}
函數handleError（err）{
document.getElementById（“ errcode”）。innerHTML = err.code;
document.getElementById（“ errmessage”）。innerHTML = err.message;
}
</ script>
</ body>
</ html>
4.監視位置變化
下面我們介紹使用watchPosition方法實現位置變化的監視，他的使用方法和getCurrentPosition一樣。
復制代碼代碼如下：
<！DOCTYPE HTML>
<html>
<head>
<title>示例</ title>
<style>
表{邊界折疊：折疊；}
th，td {填充：4px；}
{文本對齊：右；}
< / style>
</ head>
<body>
<table border =“ 1”>
<tr>
<th>經度：</ th>
<td id =“ longitude”>-</ td>
<th>緯度：</ th>
<td id =“ latitude”>-</ td>
</ tr>
<tr>
<th>海拔高度：</ th>
<td id =“ altitude”>-</ td>
<th>準確性：< / th>
<td id =“ accuracy”>-</ td>
</ tr>
<tr>
<th>高度精度：</ th>
<td id =“ altitudeAccuracy”>-</ td>
<th>標題：</ th>
var watchID = navigator.geolocation.watchPosition（displayPosition，handleError，options）; document.getElementById（“ pressme”）。onclick =函數（e）{
navigator.geolocation.clearWatch（watchID）;
};
函數displayPosition（pos）{
var properties = [“經度”，“緯度”，“海拔”，“精度”，“ 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;
}
函數handleError（err）{
document.getElementById（“ errcode”）。innerHTML = err.code;
document.getElementById（“ errmessage”）。innerHTML = err.message;
}
</ script>
</ body>
當點擊Cancel Watch按鈕時，停止監視。demo
“HTML5中怎么使用地理位置實現定位功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
