JavaScriptで現在の位置情報を取得する方法


まず、Geolocation APIを使用するために、以下のコードをHTMLファイルのセクションに追加します:

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }
  function showPosition(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var accuracy = position.coords.accuracy;
    // 位置情報の利用例
    console.log("緯度: " + latitude);
    console.log("経度: " + longitude);
    console.log("精度: " + accuracy + " メートル");
  }
</script>

上記のコードでは、navigator.geolocationオブジェクトのgetCurrentPosition()メソッドを使用して、現在の位置情報を取得しています。ブラウザが位置情報をサポートしていない場合は、エラーメッセージが表示されます。

次に、以下のコードを任意の場所に追加することで、位置情報の取得をトリガーします:

<button onclick="getLocation()">位置情報を取得する</button>

上記のコードでは、ボタンをクリックすることでgetLocation()関数が呼び出され、位置情報の取得が開始されます。

取得した位置情報は、showPosition()関数内で利用することができます。上記の例では、取得した緯度、経度、および精度をコンソールに表示していますが、これらの値を任意の方法で利用することができます。