読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

Geolocation APIで現在地を取得する

html5

HTML5のGeolocation APIで現在地を取得してみます。
Geolocation APIはnavigator.geolocationがあるブラウザでは利用可能になりますので、対応していないブラウザを判定する必要があります。

if (navigator.geolocation) {
    // 利用出来る場合の処理
} else {
    // 利用出来ない場合の処理
}

現在地を取得するのは、navigator.geolocation.getCurrentPosition(onSuccess, onError)を使います。
onSuccessは、Geolocationオブジェクトを引数に取るので、その中のcoordsのlatitude, longitudeが緯度経度になります。また、accuracyが正確性を表す値になり、小さいほうが正確なようです。どの程度かはわかりませんが、あまりにも大きな値であれば正確ではないと言えるでしょう。
onErrorは、取得出来ない場合のエラーオブジェクトです。位置情報の取得を許可しない場合は次の様なエラーが引数として渡されます。

PositionError {message: "User denied Geolocation", code: 1, PERMISSION_DENIED: 1, POSITION_UNAVAILABLE: 2, TIMEOUT: 3} 

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Location API Sample</title>
  </head>
  <body>
    <h1>Location API Sample</h1>
    <div id="message"></div>
    <script>
      window.onload = function() {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                  document.getElementById('message').innerHTML = 'You are at ' + position.coords.latitude + ', ' + position.coords.longitude + ' now';
              }, function(e) {
                  document.getElementById('message').innerHTML = typeof e == 'string' ? e : e.message;
              });
          } else {
              document.getElementById('message').innerHTML = 'Location APIがサポートされていません。';
          }
      };
    </script>
  </body>
</html>