HTML5 は、ユーザーの位置を特定できる位置情報機能 (Geolocation API) を提供し、HTML5 のこの機能を使用して、位置情報に基づいたアプリケーションを開発できます。この記事では例を使用して、HTML5 を使用し、Baidu および Google マップのインターフェイスを使用してユーザーの正確な地理的位置情報を取得する方法を説明します。
ソース コードのダウンロード: ダウンロードするにはここをクリックしてください
HTML5 位置情報機能の使い方
地理位置情報は HTML5 の新機能であるため、HTML5 をサポートする最新のブラウザ、特に地理位置情報がより正確な iPhone などのハンドヘルド デバイスでのみ実行できます。まず、ユーザーのデバイスのブラウザが地理位置情報をサポートしているかどうかを検出し、サポートしている場合は地理情報を取得する必要があります。この機能はユーザーのプライバシーを侵害する可能性があることに注意してください。ユーザーが同意しない限り、ユーザーの位置情報は利用できません。そのため、アプリケーションにアクセスすると、地理位置情報を許可するかどうかを尋ねられます。 。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else{
alter("ブラウザは地理位置情報をサポートしていません。");
}
}
上記のコードは、ユーザー デバイスが地理位置情報をサポートしているかどうかを知ることができ、getCurrentPosition() メソッドが実行されます。 getCurrentPosition() が正常に実行されると、パラメータ showPosition で指定された関数に座標オブジェクトが返されます。 getCurrentPosition() メソッドの 2 番目のパラメータ showError は、ユーザーの位置の取得に失敗したときに実行される関数を指定します。 。
まず関数 showError() を見てみましょう。この関数は、ユーザーの地理的位置の取得に失敗したときのエラー コードの処理方法を規定しています。
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
アラート("測位に失敗しました。ユーザーは地理位置情報の要求を拒否しました。");
ケース error.POSITION_UNAVAILABLE:
アラート("測位に失敗しました。位置情報が利用できません。"); > case error.TIMEOUT:
alert("測位に失敗しました。ユーザー位置の取得リクエストがタイムアウトしました");
case error.UNKNOWN_ERROR:
alert("測位に失敗しました、測位システムに失敗しました") ");
Break;
}
}
関数 showPosition() をもう一度見てみましょう。座標の緯度と経度を呼び出して、ユーザーの緯度と経度を取得します。
コードをコピーします var lag = Position.coords.longitude; //経度
alert('Latitude:' lat ',Longitude:' lag); >}
Baidu Maps と Google Maps のインターフェースを使用してユーザーの住所を取得します
上記で、HTML5 の地理位置情報がユーザーの緯度と緯度を取得できることを学びました。必要なのは、抽象的な経度と緯度を、読み取り可能で意味のある実際のユーザーの地理的位置情報に変換することです。幸いなことに、Baidu Maps と Google Maps は、この点に関するインターフェースを提供しています。HTML5 で取得した経度および緯度の情報を地図インターフェースに渡すだけで、省や都市の情報、さらには道路などの地理的位置が返されます。家屋番号およびその他の詳細な地理的位置情報。
まず、ページ上の地理的位置を表示する div を定義し、それぞれ id#baidu_geo と id#google_geo を定義します。変更する必要があるのは、キー関数 showPosition() だけです。まず、Baidu 地図インターフェイスの対話を見てみましょう。Ajax を介して緯度と経度の情報を Baidu 地図インターフェイスに送信すると、インターフェイスは対応する省、都市、番地情報を返します。 Baidu マップ インターフェイスは JSON データの文字列を返します。必要に応じて必要な情報を div#baidu_geo に表示できます。ここでは jQuery ライブラリが使用されており、最初に jQuery ライブラリ ファイルをロードする必要があることに注意してください。
コードをコピーします