HTML5のgeopositioning

前：HTML5ドラッグ＆ドロップ

次へ：HTML5ビデオ（動画）

HTML5ジオロケーション（geopositioning）は、ユーザの位置を特定するために使用しました。

ユーザの位置を探します

HTML5ジオロケーションAPIは、ユーザの位置を取得します。

ユーザーが別段の同意をしない限り、ユーザーのプライバシーを侵害することがあり、この機能を考慮して、ユーザの位置情報は利用できません。

ブラウザのサポート

Internet Explorerの9+、Firefoxの、クロム、SafariやOperaのサポートジオロケーション（地理的位置）。

注：このようなiPhone、より正確なgeopositioningとしてGPSを備えたデバイスについては、 ジオロケーション（geopositioningを）。

HTML5 - 使用ジオターゲティング

ユーザの位置を取得するためにgetCurrentPosition（）メソッドを使用します。

次の例は、単純なジオロケーションインスタンスで、ユーザーは、ロケーション緯度と経度に戻ることができます：

例

VARのx =のdocument.getElementById（ "デモ"）;
機能のgetLocation（）
{
（navigator.geolocation）の場合
{
navigator.geolocation.getCurrentPosition（showPosition）。
}
ほかに
{
x.innerHTML = "このブラウザは、場所を取得サポートしていません。";
}
}

関数showPosition（位置）
{
x.innerHTML = "緯度：" + position.coords.latitude +
「<BR>経度： "+ position.coords.longitude。
}

»をお試しください

分析の例：

これは、geopositioningについて試験します
サポートされている場合、getCurrentPosition（）メソッドを実行します。そうでない場合、それはユーザーにメッセージを表示します。
getCurrentPosition（）が成功した場合、関数はshowPositionの目標座標で指定されたパラメータを返します
showPosition（）関数は、緯度と経度を取得し、表示します

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

エラーの処理と拒否

エラーを処理するための第2のパラメータgetCurrentPosition（）メソッド。 get関数を実行するときにユーザーの位置が失敗したときに指定します。

例

関数showError（エラー）
{
スイッチ（error.code）
{
ケースはerror.PERMISSION_DENIED：
x.innerHTMLは= "ユーザは、ロケーション要求を取得するために減少しました。」
破ります;
ケースerror.POSITION_UNAVAILABLE：
x.innerHTML = "位置情報は利用できません。」
破ります;
ケースerror.TIMEOUT：
x.innerHTML = "要求ユーザの場所がタイムアウトしました。」
破ります;
ケースerror.UNKNOWN_ERROR：
x.innerHTML = "不明なエラー。」
破ります;
}
}

»をお試しください

エラーコード：

アクセス許可は拒否されました - ユーザーがgeopositioningを許可されていません
利用できない位置 - 現在位置を取得することができません
タイムアウト - 操作がタイムアウトしました

地図で結果を表示

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

例

関数showPosition（位置）
{
するvar latlon = position.coords.latitude + "、" + position.coords.longitude。

するvar img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+ Latlon + "＆ズーム= 14＆サイズ= 400×300＆センサー= falseを";
document.getElementById（ "mapholder"）innerHTMLの= "<IMG SRC = '" + img_url + "'>";
}

»をお試しください

上記の例では、Googleマップ上に（静止画像を使用して）表示位置によって返された緯度と経度のデータを使用しています。

Googleマップスクリプト
上記のリンクは、マーカー、ズームやドラッグオプションを使用してインタラクティブマップを表示するスクリプトを使用する方法を示します。

情報指定された場所へ

このページには、地図上のユーザの位置を表示する方法を示します。しかし、与えられた場所のジオロケーション情報も非常に便利です。

例：

ローカル情報を更新
ユーザの周りの関心の表示ポイント
インタラクティブなカーナビゲーションシステム（GPS）

getCurrentPosition（）メソッド - 戻りデータ

T成功した場合、getCurrentPosition（）メソッドは、オブジェクトを返します。常に緯度、経度、精度のプロパティを返します。可能な場合は、次の追加プロパティが返されます。

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

ジオロケーションオブジェクト - 他の興味深い方法

watchPositionは（） - ユーザーの現在位置を返し、そして（車にGPSのように）更新された位置を返すようにすると、ユーザーが移動を続けます。

clearWatch（） - ストップwatchPosition（）メソッド

次の例ではwatchPosition（）メソッドを示しています。あなたは（iPhoneなど）例をテストするために、正確なGPSデバイスが必要になります。

例

VARのx =のdocument.getElementById（ "デモ"）;
機能のgetLocation（）
{
（navigator.geolocation）の場合
{
navigator.geolocation.watchPosition（showPosition）。
}
ほかに
{
x.innerHTML = "このブラウザは、場所を取得サポートしていません。";
}
}
関数showPosition（位置）
{
x.innerHTML = "緯度：" + position.coords.latitude +
「<BR>経度： "+ position.coords.longitude。
}

»をお試しください

前：HTML5ドラッグ＆ドロップ

次へ：HTML5ビデオ（動画）