--- title: Geolocation APIでPCやスマホの位置情報を取得する tags: JavaScript Geolocation author: akkey2475 slide: false --- ## 最初に Geolocation APIを使用してPCやスマホで位置情報を取得するサンプルを作りました。 ## Geolocation API とは ユーザーの位置情報を扱うためのAPIで、昔は各キャリアで別々の規格になっていたものを標準化したものらしいです。 これを使うことで各キャリアのスマホもPCも対応ブラウザであれば同じ書き方で位置情報を扱える、ということです。 位置情報を扱うサイトでは、このGeolocation APIを使用しているようです。 ## サンプル 以下のファイルをサーバーに置いてPCやスマホでアクセスしてください。 画面のボタンを押すと緯度・経度が表示されます。(位置情報へのアクセスは許可しておいてください) ※一部のブラウザではHTTPSでアクセスしないと位置情報が取得できないようです ```html:sample.html 位置情報取得サンプル

位置情報取得サンプル

``` ## 解説 Geolocation API にアクセスするには `navigator.geolocation` オブジェクトを使用します。 `navigator.geolocation` オブジェクトが存在しない場合は Geolocation API に対応していないということになります。 このサンプルでは、ページの描画時にアラートで表示するようにしています。 ```js // Geolocation APIに対応している if (navigator.geolocation) { alert("この端末では位置情報が取得できます"); // Geolocation APIに対応していない } else { alert("この端末では位置情報が取得できません"); } ``` このサンプルでは、ページに表示されたボタンを押すと、関数 `getPosition()` が実行され現在地の緯度・経度が表示されるようになっています。 この際、現在地を取得するために Google API の `getCurrentPosition()` メソッドを使います。 `getCurrentPosition()` は実行したタイミングに一度だけ位置情報を取得するメソッドです。 ```js // 現在地を取得 navigator.geolocation.getCurrentPosition( (中略) ); ``` `getCurrentPosition()` の第一引数には取得成功した場合に実行する関数を指定します。 この関数には、位置情報が格納されたオブジェクトが引数として渡されます。ここでは `position` としています。 `position` のプロパティを参照することで緯度や経度などの情報を取得することができます。 ```js // 取得成功した場合 function(position) { alert("緯度:"+position.coords.latitude+",経度"+position.coords.longitude); }, ``` `getCurrentPosition()` の第二引数には取得失敗した場合に実行する関数を指定します。 この関数には、エラー情報が格納されたオブジェクトが引数として渡されます。ここでは `error` としています。 `error.code` を参照することでエラーコードを取得することができます。 ```js // 取得失敗した場合 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で接続した場合などに返されるようです。