Help us understand the problem. What is going on with this article?

Geolocation APIでPCやスマホの位置情報を取得する

More than 3 years have passed since last update.

最初に

Geolocation APIを使用してPCやスマホで位置情報を取得するサンプルを作りました。

Geolocation API とは

ユーザーの位置情報を扱うためのAPIで、昔は各キャリアで別々の規格になっていたものを標準化したものらしいです。
これを使うことで各キャリアのスマホもPCも対応ブラウザであれば同じ書き方で位置情報を扱える、ということです。
位置情報を扱うサイトでは、このGeolocation APIを使用しているようです。

サンプル

以下のファイルをサーバーに置いてPCやスマホでアクセスしてください。
画面のボタンを押すと緯度・経度が表示されます。(位置情報へのアクセスは許可しておいてください)
※一部のブラウザではHTTPSでアクセスしないと位置情報が取得できないようです

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>位置情報取得サンプル</title>

  <script>
    // Geolocation APIに対応している
    if (navigator.geolocation) {
      alert("この端末では位置情報が取得できます");
    // Geolocation APIに対応していない
    } else {
      alert("この端末では位置情報が取得できません");
    }

    // 現在地取得処理
    function getPosition() {
      // 現在地を取得
      navigator.geolocation.getCurrentPosition(
        // 取得成功した場合
        function(position) {
            alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
        },
        // 取得失敗した場合
        function(error) {
          switch(error.code) {
            case 1: //PERMISSION_DENIED
              alert("位置情報の利用が許可されていません");
              break;
            case 2: //POSITION_UNAVAILABLE
              alert("現在位置が取得できませんでした");
              break;
            case 3: //TIMEOUT
              alert("タイムアウトになりました");
              break;
            default:
              alert("その他のエラー(エラーコード:"+error.code+")");
              break;
          }
        }
      );
    }
  </script>
</head>
<body>
  <h1>位置情報取得サンプル</h1>
  <button onclick="getPosition();">位置情報を取得する</button>
</body>
</html>

解説

Geolocation API にアクセスするには navigator.geolocation オブジェクトを使用します。
navigator.geolocation オブジェクトが存在しない場合は Geolocation API に対応していないということになります。
このサンプルでは、ページの描画時にアラートで表示するようにしています。

// Geolocation APIに対応している
if (navigator.geolocation) {
  alert("この端末では位置情報が取得できます");
// Geolocation APIに対応していない
} else {
  alert("この端末では位置情報が取得できません");
}

このサンプルでは、ページに表示されたボタンを押すと、関数 getPosition() が実行され現在地の緯度・経度が表示されるようになっています。
この際、現在地を取得するために Google API の getCurrentPosition() メソッドを使います。
getCurrentPosition() は実行したタイミングに一度だけ位置情報を取得するメソッドです。

// 現在地を取得
navigator.geolocation.getCurrentPosition(
    (中略)
);

getCurrentPosition() の第一引数には取得成功した場合に実行する関数を指定します。
この関数には、位置情報が格納されたオブジェクトが引数として渡されます。ここでは position としています。
position のプロパティを参照することで緯度や経度などの情報を取得することができます。

  // 取得成功した場合
  function(position) {
      alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude);
  },

getCurrentPosition() の第二引数には取得失敗した場合に実行する関数を指定します。
この関数には、エラー情報が格納されたオブジェクトが引数として渡されます。ここでは error としています。
error.code を参照することでエラーコードを取得することができます。

  // 取得失敗した場合
  function(error) {
    switch(error.code) {
      case 1: //PERMISSION_DENIED
        alert("位置情報の利用が許可されていません");
        break;
      case 2: //POSITION_UNAVAILABLE
        alert("現在位置が取得できませんでした");
        break;
      case 3: //TIMEOUT
        alert("タイムアウトになりました");
        break;
      default:
        alert("その他のエラー(エラーコード:"+error.code+")");
        break;
    }
  }

ちなみに getCurrentPosition() には第三引数を渡すことで、タイムアウト時間などのオプションを設定することもできるようです。今回は省略しています。

補足

エラーコードについて、「1: PERMISSION_DENIED」は位置情報取得を許可しなかった場合、「2: POSITION_UNAVAILABLE」はHTTPSで接続が必要なブラウザでHTTPで接続した場合などに返されるようです。

akkey2475
技術迷子中。 メインはPHPですが、他の強みを手に入れるべくいろいろ触ってみているところ。
http://dev-n-gine.akkey.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした