UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#95 JavaScriptを使用して位置情報を取得する基本的なコード例

記入日:2023-04-13 編集日:2023-04-13

JavaScriptを使用して位置情報を取得してみようと思います。

この記事を読むと(約5分)
JavaScriptを使用して位置情報を取得する基本的なコードがイメージできます。

位置情報(経度緯度)を取得するJavaScript

位置情報(経度緯度)を取得するためには、HTML5のGeolocation APIを使用することができます。以下は、JavaScriptを使用して位置情報を取得する基本的なコード例です。

以下のコードは、HTML5のGeolocation APIを使用して現在の位置情報(緯度と経度)を取得し、それをページに表示するものです。

navigator.geolocation.getCurrentPosition()関数は、現在の位置情報を取得し、成功した場合はshowPosition()関数を、失敗した場合はshowError()関数を呼び出します。

showPosition()関数では、取得した位置情報をページに表示し、showError()関数では位置情報の取得に失敗した場合のエラーメッセージを表示します。
また、ページの読み込み完了時にgetLocation()関数を呼び出すことで、ページが読み込まれた際に位置情報の取得が試行されます。

<!DOCTYPE html>
<html>
<head>
  <title>位置情報取得</title>
</head>
<body>
  <h1>位置情報取得サンプル</h1>
  <p id="locationData"></p>
  
  <script>
    // 位置情報の取得を試行する関数
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
      } else {
        document.getElementById("locationData").innerHTML = "位置情報の取得がサポートされていません。";
      }
    }

    // 位置情報の取得に成功した場合のコールバック関数
    function showPosition(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      document.getElementById("locationData").innerHTML = "緯度: " + latitude + "<br>経度: " + longitude;
    }

    // 位置情報の取得に失敗した場合のコールバック関数
    function showError(error) {
      switch(error.code) {
        case error.PERMISSION_DENIED:
          document.getElementById("locationData").innerHTML = "位置情報の取得が許可されませんでした。";
          break;
        case error.POSITION_UNAVAILABLE:
          document.getElementById("locationData").innerHTML = "位置情報の取得ができませんでした。";
          break;
        case error.TIMEOUT:
          document.getElementById("locationData").innerHTML = "位置情報の取得がタイムアウトしました。";
          break;
        case error.UNKNOWN_ERROR:
          document.getElementById("locationData").innerHTML = "位置情報の取得中に不明なエラーが発生しました。";
          break;
      }
    }

    // ページの読み込み完了時に位置情報の取得を試行
    window.onload = function() {
      getLocation();
    };
  </script>
</body>
</html>

navigator.geolocation.getCurrentPosition()関数が位置情報の取得のメインの処理を担います。
この関数は、位置情報を非同期で取得し、成功した場合にはshowPosition()関数をコールバックとして呼び出し、取得した位置情報を引数として渡します。また、失敗した場合にはshowError()関数をコールバックとして呼び出し、エラー情報を引数として渡します。

getCurrentPosition()関数は以下のような構文を持ちます。

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

successCallback:

位置情報の取得に成功した場合に実行されるコールバック関数(ここではshowPosition()関数)

errorCallback:

位置情報の取得に失敗した場合に実行されるコールバック関数(ここではshowError()関数)

options:

オプションの設定。省略可能であり、位置情報の取得方法などを指定することができます。

showPosition()関数やshowError()関数は、getCurrentPosition()関数が成功または失敗した際の処理を定義するためのコールバック関数として指定されます。これにより、位置情報の取得が成功した場合と失敗した場合にそれぞれ異なる処理を実行できるようになります。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。