HTML5 Geolocation

❮ 前章へ 次章へ ❯

HTML Geolocation は、ユーザの場所を見つけるために使用されます。

ユーザの場所を見つける

HTML5 Geolocation API は、ユーザの地理的な位置を取得するために使用されます。

これは、ユーザのプライバシーを侵害する恐れがあるので、ユーザ承認なしでは利用できません。

ブラウザ・サポート

表中の数字は、完全に Geolocation をサポートした最初のブラウザのバージョンを表しています。

API
Geolocation 5.0 9.0 3.5 5.0 16.0

注: Geolocation は、iPhoneのような GPS 機能を持つデバイスでは非常に正確です。

HTML Geolocation の使用

ユーザの場所を取得するには、getCurrentPosition() メソッドを使用します。

下の例は、ユーザの場所を緯度と経度で返す簡単な Geolocation の例です：

例

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

Try it yourself ❯

例の説明：

上の例は、エラー処理のない、非常に基本的な Geolocation スクリプトです。

エラーおよびリジェクト処理

getCurrentPosition() メソッドの2番目のパラメータは、エラー処理に使用されます。 ユーザの場所を取得するのに失敗した場合に、実行する関数を指定します：

例

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

Try it yourself ❯

エラーコード：

結果を地図に表示

地図に結果を表示するには、Google マップのような、緯度と経度を使用することのできる マップサービスへのアクセスが必要になります：

例

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Try it yourself ❯

上の例では、Google マップ（静止画像）に場所を示すために、戻り値の緯度と経度データを使用します。

Google マップス・スクリプト
マーカ、ズーム、ドラッグオプション付きインタラクティブな地図を表示する、スクリプトの使用方法について説明します。

Location-specific 情報

このページでは、地図上にユーザの場所を表示するデモを行いましたが、Geolocation は、次の location-specific 情報についても非常に便利です。

例:

（訳注）ターン・バイ・ターンとは、 経路誘導（ナビゲーション）システムのユーザーインターフェースの一種で、 交差点などでの進行方向を、音声や矢印アイコンなどで表示する表示方式のことです。

getCurrentPosition() メソッド - 返されるデータ

getCurrentPosition() メソッドは、成功した場合はオブジェクトを返します。latitude、 longitude および accuracy プロパティは常に返されます。利用可能な場合は、下のその他のプロパティが返されます。

プロパティ 説明
coords.latitude 10進数による緯度
coords.longitude 10進数による経度
coords.accuracy 緯度・経度の誤差
coords.altitude 平均海水面からのメータによる高度
coords.altitudeAccuracy 高度の誤差
coords.heading 方角（北から時計回りの角度）
coords.speed 速度（単位：メートル/秒）
timestamp 応答の日付/時刻

Geolocation オブジェクト - 他の興味深いメソッド

watchPosition() - ユーザの現在位置を返し、（車中のGPSのように）ユーザの移動に伴う最新の位置を返し続けます。

clearWatch() - watchPosition() メソッドを停止します。

watchPosition() メソッドの例を下に示します。これをテストするためには、 iPhone のような精密な GPS デバイスが必要です：

例

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

Try it yourself ❯

❮ 前章へ 次章へ ❯