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

HTML DOM ジオロケーションの position プロパティとは？使い方をわかりやすく解説

HTML DOM の Geolocation coordinates プロパティは、ユーザーのデバイスが地球上のどの位置にあるか、また高度などの情報を取得するために使用されます。

ただし、このプロパティが動作するには、ユーザー自身が位置情報（座標）の提供に同意する必要があります。これは、ユーザーのプライバシーを保護するために設けられた仕組みです。同意が得られれば、さまざまなデバイスの位置情報を追跡・活用できるようになります。

position プロパティの一覧

Geolocation の position オブジェクトには、以下のプロパティが用意されています。

注意： 下記のプロパティはすべて読み取り専用です。

プロパティ説明
position.coordsデバイスの緯度・経度・高度・速度などの情報を含む Coordinates オブジェクトを返します。さらに、測定値の精度をメートル単位で示す accuracy（精度）値も含まれています。
position.timestampposition オブジェクトが作成された日時を表します。戻り値はその時刻を示す DOMTimeStamp です。

構文（シンタックス）

Geolocation の position プロパティの基本的な構文は次のとおりです。

position.property

ここでの property には、上記の表にある2つのプロパティ（coords または timestamp）のいずれかを指定します。

サンプルコード

それでは、Geolocation の position プロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Geolocation coordinates property</h1>
<p>下のボタンをクリックして座標を取得してください</p>
<button onclick="getCoords()">COORDINATES</button>
<p id="Sample">あなたの座標：</p>
<script>
    var p = document.getElementById("Sample");
    function getCoords() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showCoords);
        } else {
            p.innerHTML = "このブラウザはジオロケーションに対応していません。";
        }
    }
    function showCoords(position) {
        p.innerHTML = "経度：" + position.coords.longitude +
            "<br>緯度： " + position.coords.latitude +
            "<br>精度： " + position.coords.accuracy;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM ジオロケーションの position プロパティとは？使い方をわかりやすく解説

COORDINATES ボタンをクリックすると、以下のように位置情報が表示されます。

HTML DOM ジオロケーションの position プロパティとは？使い方をわかりやすく解説

コードの解説

このサンプルコードの仕組みを順番に見ていきましょう。

1. ボタンの作成

まず、クリックされると getCoords() メソッドを実行する COORDINATES ボタンを作成しています。

<button onclick="getCoords()">COORDINATES</button>

2. ブラウザの対応チェックと位置情報の取得

getCoords() 関数では、navigator オブジェクトの geolocation プロパティを使って、ブラウザがジオロケーション機能に対応しているかどうかを判定します。対応している場合は Geolocation オブジェクトが返されます。

そして、navigator.geolocation の getCurrentPosition() メソッドを呼び出すことで、デバイスの現在位置を取得できます。このメソッドはコールバック関数を受け取る仕組みになっており、JavaScript ではすべての関数がオブジェクトとして扱われるため、関数そのものを引数として渡すことができます。

3. 取得した座標の表示

ここでは showCoords() メソッドをコールバックとして渡しています。showCoords() は position インターフェースを引数として受け取り、その内容をもとに id が「Sample」の段落要素の中へ、経度・緯度・精度を表示します。表示には段落要素の innerHTML プロパティを使用してテキストを書き込んでいます。

function getCoords() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showCoords);
    } else {
        p.innerHTML = "このブラウザはジオロケーションに対応していません。";
    }
}
function showCoords(position) {
    p.innerHTML = "経度：" + position.coords.longitude +
        "<br>緯度： " + position.coords.latitude +
        "<br>精度： " + position.coords.accuracy;
}

このように、Geolocation API を使えば、ユーザーの同意のもとで簡単に位置情報を取得し、Web アプリケーションに活用することができます。

  1. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ

  2. HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法

    HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1