カテゴリー
HTML JavaScript Webサイト作成

位置情報の取得

こんにちは、エムケーワイです。

今回はJavaScriptを使って現在地の位置情報の取得と、緯度、経度、精度の表示にトライしてみます。

まず最初に実際の動作を確認していただき、その後実現方法の説明を行います。

目次 [閉じる]
  1. 現在地の位置情報の取得と表示
  2. HTMLコード
  3. JavaScriptコード
  4. CSS設定
  5. まとめ

1. 現在地の位置情報の取得と表示

下の「現在地を取得」ボタンをクリックすると、下図のようなダイアログが表示されます(下図はFirefoxの例です)。「許可する」をクリックすると、現在地の位置情報を取得し、緯度、経度、精度を表示します。精度は半径です。

現在地は

 緯度：°

 経度：°

 精度(半径)：m

です。

スマホのChromeで位置情報にアクセスする際「このサイトは権限を要求できません」というメッセージが表示される場合は、メニューから「設定」－「サイトの設定」－「位置情報」と進み、本サイトからの位置情報へのアクセスを許可してみてください。

2. HTMLコード

今回作成したHTMLコードは下記の通りです。

<section class="mkyPosSection">
    <input type="button" value="現在地を取得" id="button1">
    <div class="mkyPosInfo">
        <p>現在地は</p>
        <p>&emsp;緯度：<span id="pos1" class="mkyPosition"></span>°</p>
        <p>&emsp;経度：<span id="pos2" class="mkyPosition"></span>°</p>
        <p>&emsp;精度(半径)：<span id="pos3" class="mkyPosition"></span>m</p>
        <p>です。</p>
    </div>
</section>
  1. “現在地を取得”ボタンと位置情報を表示する領域をsectionタグで囲みます。クラスはCSS設定で使用します。
  2. “現在地を取得”ボタンを配置します。idはJavaScriptで使用します。
  3. 位置情報を表示する領域をdivタグで囲みます。クラスはCSS設定で使用します。
  4. 位置情報として緯度、経度、精度(半径)を表示します。それぞれの数値はJavaScriptにより、span要素のコンテンツとして挿入されます。span要素のクラスはCSS設定で使用します。

3. JavaScriptコード

今回作成したJavaScriptコードは下記の通りです。

<script>
'use strict';

function success(pos) {
    const lat = pos.coords.latitude;
    const long = pos.coords.longitude;
    const accuracy = pos.coords.accuracy;

    document.getElementById('pos1').textContent = lat;
    document.getElementById('pos2').textContent = long;
    document.getElementById('pos3').textContent = accuracy;
}

function fail(error) {
    alert('現在地の取得に失敗しました。エラーコード：' + error.code);
}

document.getElementById('button1').onclick = function() {
    navigator.geolocation.getCurrentPosition(success, fail);
    this.blur();
}
</script>

3-1. “現在地を取得”ボタンクリック時の処理

JavaScriptコードの最後に記載されている”現在地を取得”ボタンクリック時の処理から説明します。

  1. navigatorオブジェクトのgeolocationオブジェクトのgetCurrentPositionメソッドを呼び出し、現在地の位置情報を取得します。位置情報の取得に成功した場合は関数success()が、失敗した場合は関数fail()が呼び出されます。
  2. “現在地を取得”ボタンのフォーカスを外します。

たった1行のJavaScriptコードで位置情報が取得できてしまいます！

3-2. function success()

位置情報の取得に成功した場合に呼び出される関数です。引数posに位置情報が格納されており、下記の処理を行っています。

  1. 定数latに位置情報の緯度(pos.coords.latitude)を格納します。
  2. 定数longに位置情報の経度(pos.coords.longitude)を格納します。
  3. 定数accuracyに位置情報の精度(pos.coords.accuracy)を格納します。
  4. クラス”pos1″を持つspan要素のコンテンツとして定数latを挿入します。
  5. クラス”pos2″を持つspan要素のコンテンツとして定数longを挿入します。
  6. クラス”pos3″を持つspan要素のコンテンツとして定数accuracyを挿入します。

引数posには緯度、経度、精度以外にも様々な位置情報が含まれています。

3-3. function fail()

位置情報の取得に失敗した場合に呼び出される関数で、アラートダイアログにメッセージとエラーコードを表示します。

引数errorにエラー情報が含まれています。

4. CSS設定

特に複雑なことは行っていませんが、位置情報の表示のためのCSS設定を以下に示しておきます。

.mkyPosSection {
    background-color: white;
    margin-top: 50px;
    margin-bottom: 30px;
    padding: 3rem 0 3rem 1rem;
    color: #444444;
}

.mkyPosInfo {
    margin: 30px 10px 10px 10px;
}

.mkyPosition {
    font-weight: bold;
    color: red;
}
  1. section要素(“現在地を取得”ボタンおよび位置情報表示領域)の背景色、マージン、パディング、文字色を設定しています。
  2. div要素のマージンを設定しています。”現在地を取得”ボタンと位置情報の間隔を確保するために、上マージンを他のマージンより大きくしています。
  3. span要素(緯度、経度、精度の数値)のフォントウェイトと文字色を設定しています。

5. まとめ

JavaScriptを使って現在地の位置情報の取得と表示にトライしてみました。

現在地の位置情報はたった1行のコードで取得することができます。

今回は取得した位置情報から緯度、経度、精度の表示を行いましたが、現在地周辺の地図や天気予報の表示などに応用できそうなので、今後トライしてみようと思います。

最後までお読みいただきありがとうございました。