【JavaScript】ブラウザで緯度経度の情報を取得する – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

apiを使わずに、navigator.geolocation.getCurrentPositionだけでJSで取得でくる。
ただし、chromeではSSL環境では使用できない。そのため、テストをする際もローカルではデフォルトではテストできないので、SSL環境を構築する必要がある。※動作確認するために、ドメインを取得してLet’s Encryptの環境を作りました。

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
</head>

<div id="app">
    <h1>現在地</h1>
    <span v-if="err">
        緯度経度の情報を取得できませんでした。
    </span>
    <ul>
        <li>緯度:{{lat}}</li>
        <li>経度:{{long}}</li>
    </ul>
    <a v-bind:href="`${url}`">登録する</a>
</div>

<script>
let lat = "";
let long = "";
function success(pos) {
  const crd = pos.coords;

  lat = crd.latitude;
  long = crd.longitude;
 
  let url = "/index.html?lat=" +lat + "&long=" + long;
  var app = new Vue({
    el: '#app',
    data: {
        lat: lat,
        long: long,
        url: url,
        err: null
    }
  })
}

function error(err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
    let url = "/index.html?lat=" +lat + "&long=" + long;
    var app = new Vue({
    el: '#app',
    data: {
        lat: lat,
        long: long,
        url: url,
        err: err
    }
  })
}
navigator.geolocation.getCurrentPosition(success, error);
</script>