Geolocation地理定位

使用地理定位

下例是一個地理定位實體，可回傳用戶位置的經度和緯度：

const success = res => {
	const { latitude, longitude } = res.coords
	console.log(`${longitude},${latitude}`)
}
if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(success)
}

我們一步步剖析這段代碼：

第一步：判斷瀏覽器是否有geolocation物件：

if (navigator.geolocation) {}

第二步：呼叫geolocation的getCurrentPosition()方法：

navigator.geolocation.getCurrentPosition(success,err)

getCurrentPosition（）方法有兩個引數：

success：成功獲取地理位置的回呼函式
err ：獲取地理位置失敗的回呼函式

第三步：創建一個success回呼函式：

const success = res => {
	const { latitude, longitude } = res.coords
	console.log(`${longitude},${latitude}`)
}

以上代碼向控制臺輸出客戶端的經緯度

getCurrentPosition()方法回傳的資料

如果成功執行getCurrentPosition()，則該方法會在成功函式中的引數傳入一個包含longitude（經度）、latitude（緯度）以及accuracy屬性，如果可用，則會回傳其他下面表格的屬性：

屬性	描述
coords.latitude	十進制數的緯度
coords.longitude	十進制數的經度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米計
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，從正北開始以度計
coords.speed	速度，以米/每秒計
timestamp	回應的日期/時間

若執行失敗，則會在失敗的回呼函式中的引數傳入錯誤資訊的字串，可能出現以下任意一個錯誤代碼：

錯誤代碼	描述
Permission denied	用戶不允許地理定位
Position unavailable	無法獲取當前位置
Timeout	操作超時
Unknown	未知錯誤

watchPosition持續監聽用戶地理位置

watchPosition() - 回傳用戶的當前位置，并繼續回傳用戶移動時的更新位置（就像汽車上的 GPS），

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法，您需要一臺精確的 GPS 設備來測驗該例（比如 iPhone）：

var view=document.getElementById("view");
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.watchPosition(showPosition);
    }else{
        view.innerHTML="該瀏覽器不支持獲取地理位置，";
    }
}
function showPosition(position){
    view.innerHTML="緯度: " + position.coords.latitude + "，經度: " + position.coords.longitude; 
}

利用百度地圖開放平臺的介面回傳靜態地圖

可以利用第三方平臺提供的介面獲取當前位置的靜態地圖，下面是一個利用百度地圖開放平臺提供的介面獲取客戶端地理位置的靜態地圖的實體：

<img id="map">
<script>
    const map = document.getElementById('map')
    const success = res => {
        // 百度地圖開放平臺提供的介面地址
        const url = 'http://api.map.baidu.com/staticimage/v2'
        // 申請的密匙,建議自己注冊申請一個
        const ak = 'wVGFYXm9ij7UCqEbW7CT1BFrOQYh6oXM'
        // 解構當前地理的經緯度
        const { latitude, longitude } = res.coords
        // 介面的地理位置引數
        const center = `${longitude},${latitude}`
        // 拼接介面地址和所需引數,該介面會根據center提供的經緯度回傳靜態地圖
        const interFace = `${url}?ak=${ak}&center=${center}`
        // 給id為map的元素設定src路徑
        map.setAttribute('src', interFace)
    }
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success)
    }
</script>

可用的第三方地圖開放平臺有騰訊地圖開放平臺、百度地圖開放平臺、高德地圖開放平臺、Google地圖開放平臺等

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253882.html

標籤：HTML5

上一篇：Video和Audio

下一篇：Web儲存