HTML5では地理的位置情報を取得する機能とpositioning_html5チュートリアルスキルを実装-H5 チュートリアル-php.cn

HTML5では地理的位置情報を取得する機能とpositioning_html5チュートリアルスキルを実装

WBOY

リリース： 2016-05-16 15:46:46

オリジナル

1542 人が閲覧しました

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() をもう一度見てみましょう。座標の緯度と経度を呼び出して、ユーザーの緯度と経度を取得します。

コードをコピーします

コードは次のとおりです。function showPosition(position){

var lat = Position.coords.latitude; //緯度

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 ライブラリファイルをロードする必要があることに注意してください。

コードをコピーします

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

function showPosition(position){
var latlon =position.coords.latitude ','position.coords.longitude;

//baidu
var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=" latlon "&output=json&pois=0";
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
beforeSend: function(){
$("#baidu_geo ").html('正在定位...');
},
success: function (json) {
if(json.status==0){
$("#baidu_geo ").html(json.result.formatted_address);
}
},
エラー: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon "地址位置获取失败");
}
});
});

再び谷歌マップインターフェイスのやり取りを参照します。同様に、Ajax 方式で強度情報を谷歌マップインターフェイスに送信し、谷歌マップインターフェイスから対応する市区町村詳細情報を返します。 JSON データ。これらの JSON データは、インターフェースから返されるものよりもさらに詳しく、必要に応じて、div#google_geo に必要な情報を表示できます。

代码如下:

function showPosition(position){ var latlon =position.coords.latitude ','position.coords.longitude;

//google

var url = 'http://maps.google.cn/maps/api/geocode/json?latlng=' latlon '& language=CN';

$.ajax({
type: "GET",
url: url,
beforeSend: function(){
$("#google_geo").html('正在定位. ..');
},
成功: function (json) {
if(json.status=='OK'){
var results = json.results; each(results,function(index,array){
if(index==0){
$("#google_geo").html(array['formatted_address']);
}
});
}
},
エラー: function (XMLHttpRequest, textStatus, errorThrown) {
$("#google_geo").html(latlon "地址位置获取失败"); > }
});
}

以上のコードは、百度マップインターフェイスと谷歌マップインターフェイスを関数 showPosition() にそれぞれ統合しており、実際の状況に応じて使用できます。この単純な例に基づいて、携帯電話のデモデモを提案する多数のアプリケーションが作成される可能性があります。