如何使用地理位置API

使用Geolocation API，我們可以向瀏覽器詢問用戶的位置坐標

瀏覽器顯示一個navigator.geolocation對象，通過它我們將執行所有地理位置操作。

為了安全起見，它僅在使用HTTPS服務的頁面上可用，並且在所有現代瀏覽器中都可用。

navigator.geolocation

The geolocation object

自從window是全局對象，我們可以訪問navigator沒有指定window.navigator

這window.navigator瀏覽器公開的屬性指向導航器對象這是一個容器對象這使我們可以使用許多Web平台API。

這geolocation對象提供以下方法：

getCurrentPosition()
watchPosition()
clearWatch()

第一個用於獲取當前位置坐標。當我們第一次調用此方法時，瀏覽器會自動詢問用戶是否允許與我們共享此信息。

這是Chrome中該界面的外觀：

The permission screen in Chrome

在Firefox上：

The permission screen in Firefox

在Safari上：

The permission screen in Safari

每個起點只需執行一次。您可以更改自己做出的決定，並還原權限決定。在Chrome中，您可以通過以下方法來執行此操作：單擊域附近的鎖定圖標：

Permission details

授予此權限後，我們便可以繼續。

獲取用戶的位置

讓我們從以下示例代碼開始：

navigator.geolocation.getCurrentPosition(() => {})

權限面板應出現。允許權限。

注意我是如何傳遞一個空的箭頭功能，因為該函數需要一個回調函數。

這個函數是通過一個Position對象，其中包含實際位置：

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
})

該對象具有2個屬性：

coords，一種Coordinates目的
timestamp，這UNIX時間戳檢索職位時

這Coordinates對象帶有幾個定義位置的屬性：

accuracy所測量位置的精度，以米為單位
altitude測得的高度值
altitudeAccuracy測得的高度精度，以米為單位
heading設備運行的方向。以度數表示（0 =北，東= 90，南= 180，西= 270）
latitude測得的緯度值
longitude經度測量值
speed設備運行的速度，以米/秒為單位

根據實現方式和設備的不同，其中一些null。例如，在我的MacBook Air上運行的Chrome上，我僅獲得了accuracy，latitude和longitude。

navigator.geolocation.getCurrentPosition(position => {
  console.log(position.coords.latitude)
  console.log(position.coords.longitude)
})

觀察職位變化

除了獲得用戶位置一次，您還可以使用getCurrentPosition()，您可以使用watchPosition()的方法navigator.geolocation註冊一個回調函數，該函數將在設備將與我們進行通信的每次更改時調用。

用法：

navigator.geolocation.watchPosition(position => {
	console.log(position)
})

當然，如果尚未授予該權限，瀏覽器也會使用此方法來請求該權限。

我們可以通過致電navigator.geolocation.clearWatch()方法，將其傳遞給id由...返回watchPosition()：

const id = navigator.geolocation.watchPosition(position => {
	console.log(position)
})
//stop watching after 10 seconds
setTimeout(() => {
navigator.geolocation.clearWatch(id)
}, 10 * 1000)

如果用戶拒絕許可

還記得我們調用其中一種方法獲取位置時瀏覽器顯示的權限彈出窗口嗎？

如果用戶拒絕，我們可以通過添加一個錯誤處理函數作為方法的第二個參數來攔截這種情況。getCurrentPosition()和watchPosition()。

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
})

傳遞給第二個參數的對象包含一個code屬性以區分錯誤類型：

1表示拒絕權限
2表示位置不可用
3表示超時

添加更多選項

當我以前談論錯誤時，我提到了超時錯誤。查找位置可能需要一些時間，並且我們可以選擇設置允許執行操作的最長時間。

您可以通過在方法中添加第三個參數來添加超時getCurrentPosition()和watchPosition()，一個東西。

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
})

在此對象內，我們可以傳遞屬性

timeout設置請求錯誤輸出之前的毫秒數
maximumAge設置瀏覽器緩存位置的最大“年齡”。我們不接受比設定的毫秒數還早的時間
enableHighAccuracy默認為布爾false，則需要一個可能具有最高精確度的位置（這可能需要更多時間和更多能量）

用法示例：

navigator.geolocation.getCurrentPosition(position => {
  console.log(position)
}, error => {
	console.error(error)
}, {
  timeout: 1000,
  maximumAge: 10000,
  enableHighAccuracy: true
})