HTML 5 Geolocation地理位置APIの使用

9250 ワード

一、Geolocationオブジェクト
w 3 c地理的位置APIは、Geolocationオブジェクトを介して応答するオブジェクト、属性、および方法を統合する.このオブジェクトはjs呼び出しによって地理的位置情報を取得することができる.Geolocationオブジェクトはwindowにマウントされます.navigatorオブジェクトの下でwindowを通過できます.navigator.geolocation、このようにアクセスします.ブラウザがgeolocationオブジェクトをサポートしているかどうかを検出するには、次のようにします.
if (window.navigator.geolocation) {
// do some geolocation stuff
} else {
// the browser does not natively support geolocation
}

3つの共有メソッドを含むGeolocationオブジェクト.
clearWatch(watchId)                                             //  watchID       
getCurrentPosition(successCallback,[errorCallback, [options]])  //           ,       (  ),          (  )
watchPosition(successCallback, [errorCallback, [options]]) //                  ,       (  ),          (  ).

二、ユーザーの位置を取得する
ブラウザがw 3 c Geolocation APIをサポートしていると判断したら、getCurrentPosition()メソッドを使用して現在の位置を取得できます.この方法は少なくとも1つのパラメータを受け入れ,成功したコールバック関数であるが,失敗したコールバックと構成パラメータ(PositionOptions)を伝達することもできる.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,options);これは、少し完全な点の例です.
if (window.navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(successCallback, errorCallback,options);
} else {
alert('Your browser does not natively support geolocation.');
}
function successCallback(position) {
// Do something with a location here
}
function errorCallback(error) {
// There was a problem getting the location
}

三、PositionOptions
navigator.geolocation.getCurrentPositionこのメソッドを呼び出すときに3番目のパラメータを渡すことができることに気づくことができます.このパラメータはwatchPosition()メソッドにも渡すことができます.
PositionOptionsには3つの属性が含まれています
EnableHighAccurary Boolean高精度モードが有効かどうかは、APIが有効になると、可能な限り最も現実的で真実な位置情報を取得し、デフォルト値はfalseです.このモードをオンにすると、応答時間が長くなり、バッテリ消費電力が増加します.
maximumAge Integerとは、キャッシュされた時間のデフォルトが0であることを意味します.たとえば、maximumAge:75000(1分で60000).では、10:00ちょうどに地理情報を取得し、10:01にnavigatorを再び呼び出します.geolocation.getCurrentPositionは、依然として10:00のデータを返します..
timeout Integerタイムアウト時間はミリ秒単位です.
パラメータ付きの例を次に示します
var options = {
enableHighAccuracy: true,
maximumAge: 60000,
timeout: 45000
};
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,options);

この呼び出し方式は高精度モードを有効にし,60秒以内に位置情報をキャッシュし,45秒をタイムアウト時間とした.
四、位置キャッシュ
位置キャッシュとは、アプリケーションがある時点で位置情報を要求した後に記録され、新しい位置情報を要求したときに前回記録された結果が返されることを意味する.アプリケーションが頻繁に位置情報の変化を示す必要がない場合、キャッシュ位置は非常に良い技術的実践であり、処理のオーバーヘッドを節約することができる.キャッシュ時間は、PositionOptionsのmaximumAgeプロパティで設定できます.
例を挙げる
var options = {
maximumAge: 600000
};
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,options);

上のコードでは、1分間の位置情報がキャッシュされます.位置情報をキャッシュしたくない場合は、このパラメータを送信しないか、このパラメータを0に設定することができます.キャッシュ内のデータを読み続ける場合は、maximumAge値をInfinityに設定すればよい
var options = {
maximumAge: Infinity
};
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,options);

五、ユーザーの位置を更新する
watchPositionの呼び出し方法と伝達パラメータはgetCurrentPosition()と同じで、両者の最大の違いはwatchPositionメソッドを呼び出すと、すぐに戻り値が与えられます.この戻り値は一意の値ですが、このメソッドの内部の実行は異歩です.
呼び出し方式var watcher=navigator.geolocation.watchPosition(successCallback,errorCallback, options);
もっと詳しい呼び出しの例をあげます
var watcher = null;
var options = {
enableHighAccuracy: true,
timeout: 45000
};
if (window.navigator.geolocation) {
watcher = navigator.geolocation.watchPosition(successCallback,errorCallback, options);
} else {
alert('Your browser does not natively support geolocation.');
}
function successCallback(position) {
// Do something with a location here
}
function errorCallback(error) {
// There was a problem getting the location
}

六、手動で訓練する必要がない
watchPositionというモデルは自動輪訓位置更新の戦略に構築されており、設備の位置が変化すると、成功したリターンがトリガーされ、開発者が自分でタイミングを決めて輪訓する必要はありません.watchPosition()メソッドの自動ローテーションポリシーにより、アプリケーションに地理的位置情報をリアルタイムで取得する能力が提供されます.開発者の自発的な輪訓は、実際には偽のリアルタイム操作であり、アプリケーションのパフォーマンスを低下させます.
七、傍受を取り除く
ブラウザのclearTimeout()とclearInterval()のように、w 3 c Geolocation APIもclearWatch()を使用することができ、watchIDを入力とリスニングをクリアすることができ、構文は以下のnavigatorである.geolocation.clearWatch(watcher);
次の例は、起動時に位置変化のリスニングを作成し、リスニングのリターンでリスニングをクリアする例です.
var watcher = null;
var options = {
enableHighAccuracy: true,
timeout: 45000
};
if (window.navigator.geolocation) {
watcher = navigator.geolocation.watchPosition(successCallback,errorCallback, options);
} else {
alert('Your browser does not natively support geolocation.');
}
function successCallback(position) {
navigator.geolocation.clearWatch(watcher);
// Do something with a location here
}

八、成功コールバック
getcurrentPositon()メソッドとupdatePositon()メソッドを呼び出すと、正常に操作された場合、正常に操作されたコールバック関数がトリガーされ、パラメータとしてpositionオブジェクトが運ばれます.
1.Positionオブジェクト、自身が2つの属性を持つ
coords座標オブジェクト.地理座標およびその他の属性値が含まれます.
timestampはdomタイムスタンプで、位置オブジェクトが作成された時間をパッケージします.
2.Coordinatesオブジェクト
PositionオブジェクトのcoordsはCoordinatesオブジェクトのインスタンスであり、Coordinatesオブジェクトには次の属性が含まれています.
latitude緯度、10進数.
longitude経度、10進数.
Altitude海抜
accuracy経緯度の正確度、単位はメートルである.
AltitudeAccuracyの高さの精度は、サポートされていない場合nullです.
Headingデバイスの進行方向は、時計回りに0から360度、デバイス部が移動した場合はNaN、後悔nullがサポートされていない場合は
speedこの装置の現在の対地速度は、測定単位がメートル毎秒である.サポートされていない場合は、この値は空です.
次は簡単な例です.
<!DOCTYPE html>
<html>
<head>
<title>A First Geolocation Example</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="utf-8"/>'
<script type="text/javascript">
var options = {
enableHighAccuracy: true,
maximumAge: 1000,
timeout: 45000
};
if (window.navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback,errorCallback, options);
} else {
alert('Your browser does not natively support geolocation.');
}
function successCallback(position) {
var output = '';
output += "Your position has been located.

"; output += 'Latitude: ' + position.coords.latitude + "°
"; output += 'Longitude: ' + position.coords.longitude + "°
"; output += 'Accuracy: ' + position.coords.accuracy + " meters
"; if (position.coords.altitude) output += 'Altitude: ' + position.coords.altitude + " meters
"; if (position.coords.altitudeAccuracy) output += 'Altitude Accuracy: ' + position.coords.altitudeAccuracy +" meters
"; if (position.coords.heading) output += 'Heading: ' + position.coords.Heading + "°
"; if (position.coords.speed) output += 'Speed: ' + position.coords.Speed + " m/s
"; output += 'Time of Position: ' + position.timestamp; alert(output);' } function errorCallback(error) { // There was a problem getting the location } </script> </head> <body> <div>A First Geolocation Example</div> </body> </html>

九、失敗コールバック関数
1.PositionErrorオブジェクト
getCurrentPositionとuodatePositionの呼び出しに失敗すると、登録された失敗したフォールバック関数がトリガーされ、病気はPositionErrorオブジェクトのインスタンスを携帯します.
オブジェクトには通常2つのプロパティがあります
コードエラー:
PERMISSION_DENIED (1)
権限エラー
POSITION_UNAVAILALE (2)
機器の位置決めはできません
TIMEOUT (2)
タイムアウト
メッセージエラーメッセージ
例を見てみよう
var options = {
enableHighAccuracy: true,
maximumAge: 1000,
timeout: 45000
};
if (window.navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback,errorCallback, options);
} else {
alert('Your browser does not natively support geolocation.');
}
function successCallback(position) {
var output = '';
output += "Your position has been located.

"; output += 'Latitude: ' + position.coords.latitude + "°
"; output += 'Longitude: ' + position.coords.longitude + "°
"; output += 'Accuracy: ' + position.coords.accuracy + " meters
"; if (position.coords.altitude) output += 'Altitude: ' + position.coords.altitude + " meters
"; if (position.coords.altitudeAccuracy) output += 'Altitude Accuracy: ' + position.coords.altitudeAccuracy +" meters
"; if (position.coords.heading) output += 'Heading: ' + position.coords.Heading + "°
"; if (position.coords.speed) output += 'Speed: ' + position.coords.Speed + " m/s
"; output += 'Time of Position: ' + position.timestamp; alert(output); } function errorCallback(error) { switch (error.code) { case error.PERMISSION_DENIED: alert('You have denied access to your position.'); break; case error.POSITION_UNAVAILABLE: alert('There was a problem getting your position.'); break; case error.TIMEOUT: alert('The application has timed out attempting to get your ' +location.'); break; } }

十、プライバシー問題
プライバシーは非常に重要な問題であり、w 3 c Geolocation APIでもアプリケーションでもプライバシーの秘密保持は重要です.会社はプライバシーの問題に非常に関心を持っているので、ユーザーの相対的なデータを収集すると同時に、多くの保護措置をしなければなりません.ユーザーがある会社がプライバシーを覗いているのではないかと疑い始めたら、この会社は戦略を調整しなければなりません.そうしないと、考えしかありません.
位置情報の秘密保持とプライバシー保護ポリシーのため、w 3 c Geolocation APIは、呼び出すときに、まず黄色いヒントをポップアップし、アプリケーションがユーザーの位置を特定できるかどうかを決定し、ユーザーを主導する可能性があります.ユーザーが許可している場合にのみ、位置決め機能を使用できます.