JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5ジオロケーションAPIで現在地を取得する方法を徹底解説

HTML5ジオロケーションAPIとは？

HTML5のGeolocation APIを利用すると、ユーザーの位置情報をWebサイトと共有できます。JavaScriptで緯度と経度を取得し、そのデータをバックエンドのWebサーバーへ送信すれば、「近くの店舗を検索する」「地図上に現在地を表示する」といった位置情報を活用したさまざまな機能を実装可能です。

HTML5ジオロケーションAPIで現在地を取得する方法を徹底解説

Geolocation APIの基本的な仕組み

ジオロケーションAPIは、グローバルオブジェクトであるnavigatorオブジェクトの新しいプロパティ「geolocation」を通じて操作します。

getCurrentPositionメソッドは、デバイスの現在の地理的な位置を取得するためのメソッドです。位置情報は緯度・経度からなる座標のセットとして表現され、状況に応じて進行方向（heading）や速度（speed）の情報も合わせて取得できます。取得結果はPositionオブジェクトとしてコールバック関数に渡されます。

現在地を取得するサンプルコード

以下のコードを実行すると、ボタンをクリックしたときに現在の位置情報を取得してアラート表示できます。

<!DOCTYPE HTML>
<html>
   <head>
      <script type = "text/javascript">
         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            alert("Latitude : " + latitude + " Longitude: " + longitude);
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            }
            else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }
         function getLocation(){
            if(navigator.geolocation){
            // timeout at 60000 milliseconds (60 seconds)
               var options = {timeout:60000};
               navigator.geolocation.getCurrentPosition(showLocation, errorHandler, options);
            } else {
               alert("Sorry, browser does not support geolocation!");
            }
         }
      </script>
   </head>
   <body>
      <form>
         <input type = "button" onclick = "getLocation();" value = "Get Location"/>
      </form>
   </body>
</html>

エラーハンドリングについて

位置情報の取得は、ユーザーがアクセスを許可しなかったり、通信環境によって失敗することがあります。サンプルのerrorHandler関数では、err.codeの値に応じて次のようにエラーを判別しています。

  • コード1（PERMISSION_DENIED）：ユーザーが位置情報へのアクセスを拒否した場合
  • コード2（POSITION_UNAVAILABLE）：位置情報が取得できなかった場合
  • コード3（TIMEOUT）：指定した制限時間内に位置情報を取得できなかった場合

オプション設定（PositionOptions）

getCurrentPositionメソッドの第3引数には、オプションオブジェクトを指定できます。主な項目は以下の通りです。

  • timeout：位置情報の取得を待機する最大時間（ミリ秒）。サンプルでは60秒（60000ミリ秒）に設定しています。
  • enableHighAccuracy：trueにすると高精度な位置情報を優先的に取得します（バッテリー消費は増加します）。
  • maximumAge：キャッシュ済みの位置情報を再利用できる最大時間（ミリ秒）。

なお、Geolocation APIはセキュリティ保護のためHTTPS環境でのみ動作する点に注意してください。また、未対応のブラウザではnavigator.geolocationがundefinedになるため、サンプルコードのように事前にサポート有無をチェックしておくことが推奨されます。

  1. 「iPhoneを探す」で位置情報を固定する方法｜機内モードや位置情報オフの手順を解説

    「iPhoneを探す（Find My iPhone）」は、iPhoneやその他の接続デバイスの現在地を地図上で確認できる便利なアプリです。サウンドを再生してデバイスを見つけやすくする機能も備えており、お互いの位置情報を共有している相手とは、このアプリを通じて互いの居場所を確認し合うことができます。 本記事では、「iPhoneを探す」で位置情報を固定（フリーズ）する方法を詳しく解説します。位置情報を一時停止する方法や、位置情報を偽装できるのかといった関連する疑問についても丁寧にご紹介しますので、ぜひ最後までお読みください。 「iPhoneを探す」で位置情報を固定するには？ 具体的な手順をご紹介す

  2. IPアドレスから相手の所在地を特定する方法|Gmail・Outlook・コマンドプロンプト活用ガイド

    テクノロジーの進化に伴い、インターネットも大きく発展を遂げています。世界中の人々をつなぐだけでなく、IPアドレスをもとに相手の位置情報を調べることにも活用されており、この技術は高い精度を誇り、さまざまな目的で利用されています。「IPアドレスから相手の場所を特定したい」とお考えの方にとって、本記事は最適なガイドとなるでしょう。この記事では、IPアドレスから相手のおおよその住所情報を取得する方法やその重要性、さらにIPアドレスの位置情報を追跡する具体的な手法について詳しく解説します。IPアドレスで相手の位置を特定する方法IPアドレス(Internet Protocol Address)とは、インタ