Js: 取得使用者定位

因為工作都是在做地圖相關的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