JS: 取得使用者定位
Updated
•1 min read因為工作都是在做地圖相關的web，很常需要取得使用者定位的功能；但如果直接使用瀏覽器原生的 Geolocation API，可能會碰到使用者拒絕定位存取權後，程式端無法再次詢問定位存取權的問題。
爬了一下文章，無法靠程式去修正使用者端瀏覽器的定位存取權設定，得靠使用者自己重新開啟應用的定位權限；但有時候會碰到使用者想要時而拒絕、時而開啟的問題，頻繁要求使用者開啟關閉存取權可能也會導致使用者體驗下降，這種時候就不太適合使用原生API。
因此跟PM提了一個備用方案 ─ 改以使用者IP來定位，可透過一些IP定位的API來取得使用者位置，不過這個方法有幾個缺點：
多數API要有token才能使用；
IP定位較不精準
以往token都是用設定環境變數的方式來處理，但因為公司專案部署在AWS上，如果要在AWS設定環境變數，專案必須是透過連結GitLab的方式部署才能作設定，但因為部署環境的網域是在國外，基於一些資安理由公司目前無法這樣做orz…
好在目前有找到一個不需要token的 IP location API，實作如下：
import axios from 'axios';
axios.get("https://ipapi.co/json")
.then( ({ data }) => {
console.log(data);
});
/**
* {
* ...
* "country_name": "United States",
* "latitude": 37.386,
* "longitude": -122.0838,
* "timezone": "America/Los_Angeles",
* ...
* }
**/
註：leaflet 的 locate() 背後也是使用原生Geolocation API，所以也會碰到這個問題。
References