HTML5 Geolocation API的正確使用方法
發(fā)布時間:2018-12-04 15:42:49 作者:oaooao
我要評論
Geolocation是HTML5標準下的一個Web API,利用它可以獲取設(shè)備的當前位置信息(坐標),本篇文章主要介紹了三個方法,非常具有實用價值,需要的朋友可以參考下
Geolocation是HTML5標準下的一個Web API,利用它可以獲取設(shè)備的當前位置信息(坐標),此API具有三個方法:getCurrentPosition、watchPosition和clearWatch,其中最常用的是getCurrentPosition方法,剩下兩個方法需要搭配使用!
使用方法:
瀏覽器兼容性檢測:
該api通過navigator.geolocation對象發(fā)布,只有在此對象存在的情況下,才可以使用它的地理定位服務(wù),檢測方法如下:
if (navigator.geolocation) {
// 定位代碼寫在這里
} else {
alert('Geolocation is not supported in your browser')
}
獲取用戶的當前位置:
使用getCurrentLocation方法即可獲取用戶的位置信息,該方法有三個參數(shù):
| 參數(shù)列表 | 類型 | 說明 |
| handleSuccess | Function | 成功時調(diào)用函數(shù)handleSuccess |
| handleError | Function | 失敗時調(diào)用函數(shù)handleError |
| options | Object | 初始化參數(shù) |
// 初始化參數(shù)
const options = {
// 高精確度: true / false
enableHighAccuracy: true,
// 等待響應(yīng)的最長時間 單位:毫秒
timeout: 5 * 1000,
// 應(yīng)用程序愿意接受的緩存位置的最長時間
maximumAge: 0
}
// 成功回調(diào)函數(shù) : data包含位置信息
const handleSuccess = data => console.log(data)
// 失敗回調(diào)函數(shù) : error包含錯誤信息
const handleError = error => console.log(error)
if (navigator.geolocation) {
// 定位代碼寫在這里
navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options)
} else {
alert('Geolocation is not supported in your browser')
}
下面是具有更多細節(jié)的代碼:
const handleSuccess = data => {
const {
coords, // 位置信息
timestamp // 成功獲取位置信息時的時間戳
} = data
const {
accuracy, // 返回結(jié)果的精度(米)
altitude, // 相對于水平面的高度
altitudeAccuracy, // 返回高度的精度(米)
heading, // 主機設(shè)備的行進方向,從正北方向順時針方向
latitude, // 緯度
longitude, // 經(jīng)度
speed // 設(shè)備的行進速度
} = coords
// 打印出來看看
console.log('timestamp =', timestamp)
console.log('accuracy =', accuracy)
console.log('altitude =', altitude)
console.log('altitudeAccuracy =', altitudeAccuracy)
console.log('heading =', heading)
console.log('latitude =', latitude)
console.log('longitude =', longitude)
console.log('speed =', speed)
}
const handleError = error => {
switch (error.code) {
case 1:
console.log('位置服務(wù)請求被拒絕')
break
case 2:
console.log('暫時獲取不到位置信息')
break
case 3:
console.log('獲取信息超時')
break
case 4:
console.log('未知錯誤')
break
}
}
const opt = {
// 高精確度: true / false
enableHighAccuracy: true,
// 等待響應(yīng)的最長時間 單位:毫秒
timeout: 5 * 1000,
// 應(yīng)用程序愿意接受的緩存位置的最大年限
maximumAge: 0
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(handleSuccess, handleError, opt)
} else {
alert('Geolocation is not supported in your browser')
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了html5視頻常用API接口的實戰(zhàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-03-20
拖拽API是HTML5的新特性,相對于其他新特性來說,重要程度占到6成。這篇文章通過經(jīng)典案例給大家介紹了HTML5拖拽API的知識要點,需要的朋友參考下吧2018-04-20- HTML5 中提供了直接拖放的 API,極大的方便我們實現(xiàn)拖放效果,不需要去寫一大堆的 js,只需要通過監(jiān)聽元素的拖放事件就能實現(xiàn)各種拖放功能。2017-05-11
- 這篇文章主要為大家詳細介紹了不知道的幾個HTML5新功能,為大家分享出更多不為人知的HTML5 API,感興趣的小伙伴們可以參考一下2016-06-28
這篇文章主要介紹了HTML5 新增內(nèi)容和 API詳解,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-11-17



