HTML5で位置情報を取得する

こんにちは、@yoheiMuneです。
今日は、HTML5の関連機能であるGeoLocation APIを利用して、位置情報を取得する方法を学びましたので、ブログに残しておきたいと思います。


Webページで位置情報を取得するには

Webページで位置情報を取得するには何個か方法はあるんだろうと思いますが、今回はHTML5のGeoLocation APIを利用しました。このAPIは流石はHTML5の関連機能なだけあって、とても使い方が簡単(*´∇`*)すぐに使うことが出来ました。


GeoLocation APIが利用可能であるかを調べる

スマートフォンやパソコンのブラウザにおいてGeoLocation APIが利用出来るかどうかは、以下のように調べることが出来ます。

function checkGeoAvailable(){
  return !(navigator.geolocation == undefined);
}

navigatorオブジェクトにgeolocationプロパティが存在するかどうかで、GeoLocation APIが利用出来るかどうかを判別出来ます。


位置情報を取得する

位置情報を取得するには、以下のメソッドを利用します。

navigator.geolocation.getCurrentPosition(処理成功時のコールバック関数, 処理失敗時のコールバック関数);

getCurrentPositionメソッドを利用する事で、今居る地点に関する情報を1度取得する事が出来ます。ユーザーは、「位置情報取得してよいか?」とブラウザから問われますので、「いいよ〜」と答えると、機能が動きます。

処理成功時のコールバック関数

例えば以下のような処理を記述します。取得した情報を表示する処理です。

var successFunc = function(position){
  alert("位置情報の取得に成功しました");
  var status = "";
  for (var prop in position.coords) {
    status += prop + ": " + position.coords[prop] + "<br>";
  }
  status += "<a href='http://maps.google.co.jp/?q=" + position.coords.latitude + "," + position.coords.longitude + "' target='blank'>GoogleMapで現在地を表示する</a><br>";
  document.getElementById("statusArea").innerHTML = status;
}

コールバック関数の引数にpositionを指定する事で、この引数の中に色々な位置情報が格納されています。

位置情報プロパティ 意味
position.coords.speed スピード
position.coords.accuracy 位置精度
position.coords.altitudeAccuracy 高度精度
position.coords.altitude 高度
position.coords.longitude 経度
position.coords.latitude 緯度

また、「http://maps.google.co.jp/q=latitude,longitude」のURLを指定することで、GoogleMapで取得した位置を表示するリンクも作成してみました。

処理失敗時のコールバック関数

位置情報取得に失敗した場合には、例えば以下のような処理をします。

var failureFunc = function(err){
  var errCause = "";
  switch(err.code) {
    case err.TIMEOUT:
      errCause = 'Timeout';
      break;
    case err.POSITION_UNAVAILABLE:
      errCause = 'Position unavailable';
      break;
    case err.PERMISSION_DENIED:
      errCause = 'Permission denied';
      break;
    case err.UNKNOWN_ERROR:
      errCause = 'Unknown error';
      break;
  }
  alert("位置情報取得に失敗しました。原因: " + errCause + " " + err.message);
}

コールバック関数の引数errにエラーに関する情報が格納されています。err.Codeがエラーコード、err.messageがエラーメッセージです。


位置情報取得のサンプル画面は以下となります。


http://www.yoheim.net/labo/html5/geo.php



最後に

位置情報取得したら、次はGoogleMapとの連携を行ってみたいですね。地図も自由に表現出来るようになると、Webページに更なる面白みを加えられそうです。


運営しているサイトです。どうぞよろしくお願いします(*´∇`*)
HTML5LearnersHTML5を学び合うFacebookPage
HTML5サンプルページ:作成したサンプルを載せているサイト
YoheiM.NET:技術情報を中心に情報発信サイト

cooking_bot:料理情報をつぶやくTwitterアカウント