Html5-geolocation

HTML5-ジオロケーション

HTML5 Geolocation APIを使用すると、お気に入りのWebサイトと現在地を共有できます。 JavaScriptは、緯度と経度をキャプチャし、バックエンドWebサーバーに送信して、ローカルビジネスの検索や地図上での場所の表示など、場所を意識した高度な処理を実行できます。

現在、ほとんどのブラウザとモバイルデバイスはGeolocation APIをサポートしています。 ジオロケーションAPIは、グローバルナビゲーターオブジェクトの新しいプロパティで動作します。 次のように作成できる位置情報オブジェクト-

var geolocation = navigator.geolocation;

位置情報オブジェクトは、ウィジェットがデバイスの地理的位置に関する情報を取得できるようにするサービスオブジェクトです。

ジオロケーション方法

ジオロケーションオブジェクトは、次のメソッドを提供します-

Sr.No.	Method & Description
1	getCurrentPosition() このメソッドは、ユーザーの現在の地理的位置を取得します。
2	watchPosition() このメソッドは、デバイスの現在の地理的位置に関する定期的な更新を取得します。
3	clearWatch() このメソッドは、進行中のwatchPosition呼び出しをキャンセルします。

例

上記の方法のいずれかを使用するサンプルコードは次のとおりです-

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler);
}

ここで、showLocationとerrorHandlerは、次のセクションで説明するように実際の位置を取得し、エラーがあればそれを処理するために使用されるコールバックメソッドです。

ロケーションのプロパティ

位置情報メソッドgetCurrentPosition（）およびgetPositionUsingMethodName（）は、位置情報を取得するコールバックメソッドを指定します。 これらのメソッドは、完全な位置情報を保存するオブジェクト Position を使用して非同期的に呼び出されます。

*Position* オブジェクトは、デバイスの現在の地理的位置を指定します。 場所は、方位と速度に関する情報とともに地理座標のセットとして表されます。

次の表に、Positionオブジェクトのプロパティを示します。 オプションのプロパティの場合、システムが値を提供できない場合、プロパティの値はnullに設定されます。

Property	Type	Description
coords	objects	Specifies the geographic location of the device. The location is expressed as a set of geographic coordinates together with information about heading and speed.
coords.latitude	Number	Specifies the latitude estimate in decimal degrees. The value range is [-90.00, +90.00].
coords.longitude	Number	Specifies the longitude estimate in decimal degrees. The value range is [-180.00, +180.00].
coords.altitude	Number	[Optional] Specifies the altitude estimate in meters above the WGS 84 ellipsoid.
coords.accuracy	Number	[Optional] Specifies the accuracy of the latitude and longitude estimates in meters.
coords.altitudeAccuracy	Number	[Optional] Specifies the accuracy of the altitude estimate in meters.
coords.heading	Number	[Optional] Specifies the device’s current direction of movement in degrees counting clockwise relative to true north.
coords.speed	Number	[Optional] Specifies the device’s current ground speed in meters per second.
timestamp	date	Specifies the time when the location information was retrieved and the Position object created.

例

以下は、Positionオブジェクトを利用するサンプルコードです。 ここでshowLocationメソッドはコールバックメソッドです-

function showLocation( position ) {
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   ...
}

エラー処理

ジオロケーションは複雑であり、エラーをキャッチして適切に処理することが非常に必要です。

位置情報メソッドgetCurrentPosition（）およびwatchPosition（）は、 PositionError オブジェクトを提供するエラーハンドラコールバックメソッドを利用します。 このオブジェクトには、次の2つのプロパティがあります-

Property	Type	Description
code	Number	Contains a numeric code for the error.
message	String	Contains a human-readable description of the error.

次の表に、PositionErrorオブジェクトで返される可能性のあるエラーコードを示します。

Code	Constant	Description
0	UNKNOWN_ERROR	The method failed to retrieve the location of the device due to an unknown error.
1	PERMISSION_DENIED	The method failed to retrieve the location of the device because the application does not have permission to use the Location Service.
2	POSITION_UNAVAILABLE	The location of the device could not be determined.
3	TIMEOUT	The method was unable to retrieve the location information within the specified maximum timeout interval.

例

以下は、PositionErrorオブジェクトを利用するサンプルコードです。 ここでerrorHandlerメソッドはコールバックメソッドです-

function errorHandler( err ) {

   if (err.code == 1) {

     //access is denied
   }
   ...
}

位置オプション

以下は、getCurrentPosition（）メソッドの実際の構文です-

getCurrentPosition(callback, ErrorCallback, options)

ここで、3番目の引数は、デバイスの地理的位置を取得するためのオプションのセットを指定する PositionOptions オブジェクトです。

以下は、3番目の引数として指定できるオプションです-

Property	Type	Description
enableHighAccuracy	Boolean	Specifies whether the widget wants to receive the most accurate location estimate possible. By default this is false.
timeout	Number	The timeout property is the number of milliseconds your web application is willing to wait for a position.
maximumAge	Number	Specifies the expiry time in milliseconds for cached location information.

例

以下は、上記の方法を使用する方法を示すサンプルコードです-

function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});
}