GeolocationCoordinates: longitude プロパティ

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

GeolocationCoordinates インターフェイスの longitude プロパティは読み取り専用であり、地理的な位置の経度 10 進数で表す倍精度浮動小数点値です。 Unix 時刻として提供される、計測時刻を表すタイムスタンプ共に、 GeolocationCoordinates オブジェクトは GeolocationPosition インターフェイスの一部であり、位置位置を取得して返す位置情報 API 関数が返すオブジェクト型です。

longitude の値は Coordinates オブジェクトによって記述された地球上の場所の地理的な経度を 10 進数で表したものです。この値は World Geodetic System 1984 仕様 (WGS 84) で定義されています。

メモ: ゼロ子午線(本初子午線、基準子午線とも呼ばれる)は、多くの人が思い浮かべるグリニッジ子午線と正確には同じではありません。これは IERS 基準子午線 であり、 5.3 (102 メートル/335 フィート)だけグリニッジ子午線より東に位置しています。これはグローバルポジショニングシステム (GPS) で使われている規格と同じものです。

この単純な例では、ユーザーの位置情報を取得し、その結果の座標を表示します。

JavaScript

以下の JavaScript コードでは、ユーザーがボタンをクリックすると、位置情報を取得して表示するように、イベントリスナーを作成しています。

js
let button = document.getElementById("get-location");
let latText = document.getElementById("latitude");
let longText = document.getElementById("longitude");

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition((position) => {
    let lat = position.coords.latitude;
    let long = position.coords.longitude;

    latText.innerText = lat.toFixed(2);
    longText.innerText = long.toFixed(2);
  });
});

ボタン要素と緯度経度が描画される 2 つの要素をより参照しやすくするための変数を設定した後、 addEventListener()<button> 要素で呼び出してイベントリスナーを確立しています。ユーザーがボタンをクリックすると、位置情報を取得して表示するようにします。

click イベントを受信すると、getCurrentPosition() を呼び出し、端末の現在位置を要求しています。これは非同期のリクエストなので、決定した位置を表す GeolocationPosition オブジェクトを put で受け取るコールバックを用意します。

GeolocationPosition オブジェクトから、 position.coords.latitudeposition.coords.longitude を用いてユーザーの緯度と経度を取得し、表示される座標を更新できるようにします。 2 つの<span>要素は、小数点以下2桁の値に変換された後、対応する値を表示するように更新されます。

HTML

結果を表示するための HTML は次のようになります。

html
<p>
  あなたの位置は北緯 <span id="latitude">0.00</span>° 東経
  <span id="longitude">0.00</span>° です。
</p>
<button id="get-location">現在の位置を取得</button>

結果

この例を、ここで試しに実行してみてください。

仕様書

Specification
Geolocation API
# latitude-longitude-and-accuracy-attributes

ブラウザーの互換性

BCD tables only load in the browser

関連情報