JavaScriptで位置情報を取る方法

こんにちは、さるまりんです。

JavaScriptで現在の位置情報を取得するにはnavigator.geolocationオブジェクトを使います。

まず、位置情報の利用を許可してもらう必要があるので以下のようにnavigator.geolocationが使えるかを確認するコードを実行します。

if (navigator.geolocation) {
  console.log('位置情報が利用可能です');
} else {
  console.log('位置情報が利用できません');
}

これでユーザーが位置情報を利用していいと許可した場合にはnavigator.geolocationオブジェクトが利用可能になります。

次に、現在位置の取得はnavigator.geolocation.getCurrentPosition()メソッドを呼び出すことで可能です。

navigator.geolocation.getCurrentPosition(
  function(position) {
    console.log('緯度:', position.coords.latitude);
    console.log('経度:', position.coords.longitude);
  },
  function(error) {
    console.error('エラーが発生しました:', error.message);
  }
);

緯度経度以外にも高度(altitude)、精度(accuracy)も使えるようです。

つなぐとこんな処理になります。

if (navigator.geolocation) {
  console.log('位置情報が利用可能です');
  navigator.geolocation.getCurrentPosition(
    function(position) {
      console.log('緯度:', position.coords.latitude);
      console.log('経度:', position.coords.longitude);
    },
    function(error) {
      console.error('エラーが発生しました:', error.message);
    }
  );
} else {
  console.log('位置情報が利用できません');
}

この処理ですが多用しすぎると、何度も位置情報使っても良いかの確認が発生するので、どう使うかは考えたほうがよさそうです。
ページ開くたびに場所確認するような作りをして、うっとうしい〜！！！と言われたことがあります。(あたりまえか！)

読んでくれてありがとうございました。
それではまた！