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

Safari 5で使うHTML5ジオロケーションAPIの基本と実装例

HTML5のGeolocation APIを利用すると、ユーザーの現在位置情報をお気に入りのWebサイトと共有できます。JavaScriptで緯度と経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、周辺の店舗や施設の検索、地図上への現在地表示など、位置情報を活用したさまざまな機能を実現できます。

サンプルコード

それでは、現在位置を取得する具体的な方法を見ていきましょう。以下の例では、ボタンをクリックするとgetCurrentPosition()メソッドが呼び出され、取得した緯度と経度がアラートとして表示されます。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         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>

コードのポイント

このサンプルの動作を理解するために、重要なポイントを整理しておきます。

  • 対応チェック：navigator.geolocationの有無を確認し、未対応ブラウザでは警告を表示して処理を中断します。
  • 成功時のコールバック：showLocation()関数が位置情報オブジェクトを受け取り、position.coords.latitude（緯度）とposition.coords.longitude（経度）を取り出します。
  • エラー時のコールバック：errorHandler()関数がエラーコードを判定します。コード1はアクセス拒否（パーミッションの不許可）、コード2は位置情報が取得できないことを意味します。なお、コード3はタイムアウトを表します。
  • オプション設定：第三引数の{timeout:60000}により、位置情報の取得に60秒の制限時間を設けています。

このように、Geolocation APIはわずかなコードで現在位置を取得でき、プライバシー保護のため位置情報へのアクセスは必ずユーザーの許可を求める仕組みになっています。実際にWebアプリケーションへ組み込む際は、HTTPS環境での動作が必須となる点にも注意してください。

  1. HTML5 Geolocation APIの使い方｜緯度・経度を取得する方法をわかりやすく解説

    HTML5のGeolocation APIを使うと、Webサイトと位置情報を共有できるようになります。JavaScriptで現在の緯度と経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、周辺店舗の検索や地図上への現在地表示など、位置情報を活用したさまざまな機能を実装できます。Geolocation APIの基本構造Geolocation APIは、グローバルなnavigatorオブジェクトに新しく追加された「geolocation」プロパティ（Geolocationオブジェクト）を通じて操作します。このオブジェクトが提供する主なメソッドは以下の3つです。getCurren

  2. GoogleマップでHTML5 Geolocation APIを使って現在地を表示する方法

    HTML5 Geolocation APIとは？ HTML5 Geolocation APIは、ユーザーの同意のもとで位置情報をWebサイトと共有できる標準的なブラウザ機能です。JavaScriptでデバイスの緯度・経度を取得し、そのデータをバックエンドのWebサーバーへ送信することで、近くのお店や施設の検索、地図上への現在地表示など、位置情報を活かした多彩な機能を実装できます。Geolocation APIが返す座標は、デバイスの地理的な位置を正確に示します。 ここでは、getCurrentPosition()メソッドを使って現在の位置情報を取得し、Googleマップ（Google Stat