HTML5 による地理的位置情報の取得_html/css_WEB-ITnose

HTML5 は、ユーザーの位置を特定できる位置情報機能 (Geolocation API) を提供しており、HTML5 のこの機能を使用して、位置情報に基づいたアプリケーションを開発できます。この記事では例を使用して、HTML5 を使用し、Baidu および Google マップのインターフェイスを使用してユーザーの正確な地理的位置情報を取得する方法を説明します。

HTML5 地理位置情報機能の使用方法

地理位置情報は HTML5 の新機能であるため、HTML5 をサポートする最新のブラウザー、特に地理位置情報がより正確な iPhone などのハンドヘルド デバイスでのみ実行されます。まず、ユーザーのデバイスのブラウザが地理位置情報をサポートしているかどうかを検出し、サポートしている場合は地理情報を取得する必要があります。この機能はユーザーのプライバシーを侵害する可能性があることに注意してください。ユーザーが同意しない限り、ユーザーの位置情報は利用できないため、アプリケーションにアクセスすると、地理位置情報を許可するかどうかを確認するメッセージが表示されます。

function getLocation(){	if (navigator.geolocation){		navigator.geolocation.getCurrentPosition(showPosition,showError);	}else{		alert("浏览器不支持地理定位。");	}}

上記のコードは、ユーザーのデバイスが地理位置情報をサポートしているかどうかを知ることができ、getCurrentPosition() メソッドが実行されます。 getCurrentPosition() が正常に実行されると、パラメータ showPosition で指定された関数に座標オブジェクトが返されます。 getCurrentPosition() メソッドの 2 番目のパラメータ showError は、ユーザーの位置の取得に失敗したときに実行される関数を指定します。 。

まず関数 showError() を見てみましょう。これは、ユーザーの地理的位置の取得に失敗した場合のエラー コード処理方法を規定しています。

function showError(error){	switch(error.code) {		case error.PERMISSION_DENIED:			alert("定位失败,用户拒绝请求地理定位");			break;		case error.POSITION_UNAVAILABLE:			alert("定位失败,位置信息是不可用");			break;		case error.TIMEOUT:			alert("定位失败,请求获取用户位置超时");			break;		case error.UNKNOWN_ERROR:			alert("定位失败,定位系统失效");			break;    }}

関数 showPosition() をもう一度見て、取得する座標の緯度と経度を呼び出します。ユーザーの緯度と経度。

function showPosition(position){	var lat = position.coords.latitude; //纬度	var lag = position.coords.longitude; //经度	alert('纬度:'+lat+',经度:'+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 ライブラリ ファイルをロードする必要があることに注意してください。

そうです

Google マップのインターフェースのインタラクションを見てみましょう。同様に、緯度と経度の情報を Ajax 経由で Google マップ インターフェイスに送信すると、インターフェイスは対応する州、市、および市の番地の詳細を返します。 Google マップ インターフェイスは、JSON データの文字列も返します。これらの JSON データは、Baidu マップ インターフェイスによって返されるデータよりも詳細であり、必要に応じて必要な情報を div#google_geo に表示できます。

function showPosition(position){	var latlon = position.coords.latitude+','+position.coords.longitude;		//baidu	var url = "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);			}		},		error: function (XMLHttpRequest, textStatus, errorThrown) { 			$("#baidu_geo").html(latlon+"地址位置获取失败"); 		}	});});

上記のコードは、Baidu マップ インターフェイスと Google マップ インターフェイスをそれぞれ関数 showPosition() に統合しており、実際の状況に応じて呼び出すことができます。もちろん、これは単純なアプリケーションにすぎません。この単純な例に基づいて、多くの複雑なアプリケーションを開発できます。デモ デモにアクセスするには、モバイル ブラウザを使用することをお勧めします。