HTML5 Javascript API 拡張機能 2 の襲撃 - 地理情報サービスと地理位置情報 API Learning_html5 チュートリアル スキル

現在、最も人気のあるタイプのサービスの 1 つは、位置ベースのサービス (LBS) と呼ばれます。このタイプのサービスは、企業が特定の点の座標 (ユーザーの位置など) に近いエリアでサービスを提供するために使用する情報です。共通マップなどの関連サービス。 HTML5 では、地理位置情報を決定して共有するための新しい地理位置情報 API が追加されています。
プライバシーに関する声明
物理的な位置をリモート Web サーバーと共有する場合、プライバシーが懸念されます。したがって、Geolocation API では、Web アプリケーションが位置情報にアクセスする前に、ユーザーが許可を与える必要があります。地理位置情報データを要求する Web ページに初めてアクセスすると、ブラウザーにユーザーの位置情報へのアクセスを提供する通知バーが表示されます。ブラウザのプロンプトに従って、関連する認証を選択します。
ユーザーが許可を与えない場合、位置情報は Web アプリケーションに提供されません。関連する API を呼び出しても、成功コールバックはトリガーされません。
ブラウザのサポートを確認する
地理位置情報 API は、主流のブラウザの最新バージョンでサポートされていますが、古いブラウザとの互換性については、依然として確認する必要があります。 geolocation API が利用できない場合、以下に示すように、window.navigator.geolocation は null になります:

コードをコピー

コードは次のとおりです。

function show_islocationenabled()
{
var str = "いいえ、地理位置情報はサポートされていません。";
if (window.navigator.geolocation) {
str = "はい、地理位置情報はサポートされています。";
}
alert( str );
}

地理位置情報 API は、次の新しい属性に基づいています。ナビゲータ グローバル オブジェクト: navigator.geolocation。このオブジェクトは、訪問者のブラウザとシステムに関する有用な情報を提供します。地理位置情報は、基地局、Web データベース、GPS など、さまざまな手段を通じて取得できます。さまざまな方法で取得される地理位置情報の精度も異なります。通常、GPS によって取得される精度が最も正確です (GPS はモバイル プラットフォームで最も使用され、ネットワーク データは基本的に PC プラットフォームで使用されます)。場合によっては、場所によっては明確な地理位置情報を取得できない場合や、データをまったく受信できない場合があります。
現在位置を特定する
navigator.geolocation の getCurrentPosition() メソッドを使用して、ユーザーの現在位置を取得します。このメソッドは位置情報を 1 回だけ取得します。このメソッドがスクリプトによって呼び出されると、メソッドはホスト デバイスの現在の位置を非同期的に取得しようとします。

コードをコピーします

コードは次のとおりです:

メソッド シグネチャ: getCurrentPosition(geolocationSuccessCallback ,[geolocationErrorCallback ,geolocationOptions]);
1. geolocationSuccessCallback: 現在位置の取得に成功した後のコールバック (必須)
2. geolocationErrorCallback エラーが発生した場合に使用されるコールバック (オプション)
3. geolocationOptions。地理位置オプション (オプション)

位置情報の処理
getCurrentPositon() メソッドは、現在位置の取得に成功した後、位置情報を Position オブジェクトに保存し、このオブジェクトをパラメータとして実行します。 geolocationSuccessCallback このコールバック。このコールバック関数では、このオブジェクトに含まれる情報を使って何でも行うことができます。
位置オブジェクトには、タイムスタンプと座標という 2 つの属性があります。 timestamp 属性は地理的位置データの作成時間を表し、coords 属性は地理的位置情報を表します。これには 7 つの属性が含まれます:

コピー コード

コードは次のとおりです:

。coords.latitude: 推定緯度
。coords.longitude: 推定経度
。 🎜>. coords.accuracy: all 提供された経度および緯度の推定精度 (メートル単位)。 coords.altitudeAccuracy: 提供された高度の推定精度 (メートル単位)。ホストデバイスは現在移動中です。真北を基準として時計回りに計算されます
。coords.speed: デバイスの現在の対地速度 (メートル/秒)

。
通常、これらのプロパティのうち coords.latitude、coords.longitude、coords.accuracy の 3 つは保証されており、残りは null を返します。これはデバイスとデバイスが使用するバックエンド測位サーバーの機能によって異なります。さらに、方位と速度の属性は、ユーザーの以前の位置に基づいて計算できます。
エラーの処理
getCurrentPositon() メソッドの実行時にエラーが発生した場合、メソッドは PositionError オブジェクトを geolocationErrorCallback コールバックに渡します。
地理位置情報オプションを設定します
地理位置情報オプションの 3 つのプロパティを設定できます:

コードをコピー

コードは次のとおりです:

enableHighAccuracy: デバイスが高精度をサポートしている場合、このオプションは高精度を有効にするかどうかを示します。
timeout: クエリのタイムアウト
maximumAge: キャッシュされた場所のキャッシュを使用できる最大時間。

以下の完全な例を見てください:

コードをコピーします

コードは次のとおりです

位置:
<ボタン onclick="getLocation()">試してみる

;script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
x.innerHTML="このブラウザでは位置情報がサポートされていません。";
}
}
function showPosition(position) {
var latlon=位置.coords.latitude ","position.coords.longitude; =false";
document.getElementById("mapholder").innerHTML="";
}
function showError(error) {
switch(error.code ) {
case error.PERMISSION_DENIED:
x.innerHTML="ユーザーが位置情報のリクエストを拒否しました。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML ="位置情報が利用できません。"
break;
case error.TIMEOUT:
x.innerHTML="ユーザーの位置情報を取得するリクエストがタイムアウトしました。"
break;
case error. UNKNOWN_ERROR:
x.innerHTML="
break;
}




この例では、現在のデバイスの地理的位置を取得し、Google マップに表示します。もちろん、Baidu Map API の静的プレートを使用してこの例を変換することもできます。 Baidu Map API については、後述の実践リファレンスのリンクを参照してください。

連続測位の有効化/キャンセル

navigator.geolocation の watchPosition() メソッドを使用して、ユーザーの位置を定期的にポーリングし、ユーザーの位置が変更されたかどうかを確認します。このメソッドには 3 つのパラメータがあります。これら 3 つのパラメータは getCurrentPosition() メソッドと同じで、成功後のコールバック、失敗後のコールバック、および位置情報を取得するオプションです。このメソッドには戻り値 watchID があり、これはキャンセルに使用されます。連続測位。

navigator.geolocation の clearWatch() メソッドを使用して、進行中の watchPosition() を終了します。このメソッドは、watchID パラメータを 1 つだけ受け取ります。
以下の例を見てください:



コードをコピーします

コードは次のとおりです:

緯度:

経度:

实用参考：
官方文档：http://www.w3schools.com/html5/html5_geolocation.asp
脚本之家：http://www.jb51.net/w3school/html5/
微软帮助：http://msdn.microsoft.com/zh-cn/library/gg589502(v) =vs.85)
百度地图API：http://dev.baidu.com/wiki/static/index.htm