html5_html5 チュートリアル スキルにおける地理的位置測位 API インターフェイスの開発と適用の概要

地理位置情報のいくつかの方法: IP アドレス、GPS、Wifi、GSM/CDMA

地理位置情報取得プロセス :
1. ユーザーは、地理位置情報を取得する必要がある Web アプリケーションを開きます。
2. アプリケーションはブラウザーに地理的位置を要求し、ブラウザーは地理的位置を共有するかどうかをユーザーに尋ねるクエリをポップアップ表示します。
3. ユーザーが許可すると、ブラウザはデバイスから関連情報をクエリします。
4. ブラウザは関連情報を信頼できる位置サーバーに送信し、サーバーは特定の地理的位置を返します。

HTML5 地理的位置の実装:
1. ユーザーの地理的位置を取得するためのブラウザベースの (バックエンド サポートなし) テクノロジーを実装します
2.地理的位置 (デバイスによって異なりますが、精度は最大 10 メートルです)
3. ユーザーの地理的位置を継続的に追跡します
4. Google マップまたは百度地図と対話して位置情報を表示します

地理位置情報 APIユーザーを接続するために使用されます。現在の地理的位置情報は信頼できるサイトと共有されます。これにはユーザーのプライバシーとセキュリティの問題が伴います。そのため、サイトがユーザーの現在の地理的位置を取得する必要がある場合、ブラウザーはユーザーに「許可」または「」を求めるメッセージを表示します。拒否"。
最初にどのブラウザが Geolocation API をサポートしているかを確認してください:
IE9.0、FF3.5、Safari5.0、Chrome5.0、Opera10.6、iPhone3.0、Android2.0
Geolocation API はナビゲーターに存在しますオブジェクトには 3 つのメソッドのみが含まれています:

コードをコピー

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

1.getCurrentPosition //現在位置
2.watchPosition //監視位置
3.clearWatch //監視をクリア
navigator.geolocation.getCurrentPosition( …, function(error){
switch(error . code){
case error.TIMEOUT :
alert( " 接続がタイムアウトしました。もう一度お試しください" );
break;
case error.PERMISSION_DENIED :
alert( " 接続が拒否されました位置情報共有サービスを使用します。クエリはキャンセルされました" );
break;
case error.POSITION_UNAVAILABLE :
alert( ", 申し訳ありませんが、あなたの惑星では位置情報サービスが一時的に利用できません。" );
break;
}
});

watchPosition は、clearWatch とペアになったトラッカーのようなものです。
watchPosition と clearWatch は、setInterval と clearInterval と少し似ています。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );

HTML 5 は、地理的位置などの一連の API を提供します。まず、HTML 5 をサポートするブラウザでは、API を使用することに同意するかどうかを尋ねられます。それ以外の場合は、API が有効になりません。安全を確保するために。
1. ブラウザが LBS API をサポートしているかどうかを判断するためにオンにします

コードをコピーします

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

function isGeolocationAPIAvailable()
{
var location = "いいえ、このブラウザでは位置情報はサポートされていません。";
if (window.navigator. geolocation) {
location = "はい、このブラウザでは位置情報がサポートされています。";
}
alert(location)
}

まだ displayError があります。メソッド内で例外がキャッチされます。
2. ユーザーの地理的位置を取得します。
getCurrentPosition を使用します。 >
コードをコピーします

コードは次のとおりです: function requestPosition() { if (nav == null) {

nav = window.navigator;

}

if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback) ;
}
else {
alert("地理位置情報 API はブラウザでサポートされていません");
}
}
else {
alert("ナビゲータが見つかりません");
}
}


地理的位置が正常に取得されると、返された結果を処理するコールバック メソッドが生成されます

コードをコピーします

コードは次のとおりです: function setLocation(val, e) { document.getElementById(e ).value = val;

}

関数 successCallback(position)

{
setLocation(position.coords.latitude, "緯度"); ;
}



3. 非常によくある質問は、ユーザーの地理的位置の変化を追跡する方法です。

1 watchPosition

例は次のとおりです。



コードをコピー

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

function listenForPositionUpdates() {
if (nav == null) {
nav = window.navigator;
if (nav; != null ) {
var geoloc = nav.geolocation;
if (geoloc != null) {
watchID = geoloc.watchPosition(successCallback)
} else {
alert(" Geolocation API はお使いのブラウザではサポートされていません");
}
} else {
alert("Navigator is not found");
}
}

次に、successCallback で、表示する最新の地理的位置を設定できます:

コードをコピーします コード

function successCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude"); >}


リアルタイム追跡が不要な場合は、次のようにキャンセルできます。 🎜>}

4. 例外の処理方法

例外が発生した場合は、それをキャッチできます:



コードをコピーします

コードは次のとおりです。 if (geoloc != null) { geoloc.getCurrentPosition(successCallback, errorCallback); }

function errorCallback(error) {

var message = "";

switch (error.code) {
case error.PERMISSION_DENIED:
message = "この Web サイトにはアクセス許可がありませんuse "
"Geolocation API";
break;
case error.POSITION_UNAVAILABLE:
message = "現在位置を特定できませんでした。";
break;
case error .PERMISSION_DENIED_TIMEOUT:
message = "指定されたタイムアウト期間内に現在位置を特定できませんでした "
";
break;
}
if (message == "") {
var strErrorCode = error.code.toString();
message = "
"不明なエラー (コード: "
" のため、位置を特定できませんでした)。
alert(message);
}



5. Google マップ上に位置を表示します (Google マップ API とその他の設定が設定されている場合)

コードをコピーします

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

function getCurrentLocation() { if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showMyPosition,showError );

}
else
{
alert("いいえ、Geolocation API はこのブラウザではサポートされていません。");
}
}
function showMyPosition(position)
{
var coords=position.coords.latitude ","position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
座標 "&zoom=14&size=300x300&sensor=false";
document.getElementById("googlemap") .innerHTML="";
}
関数 showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("この Web サイトには Geolocation API を使用する権限がありません")
break;
case error.POSITION_UNAVAILABLE:
alert("現在位置を取得できませんでした決定されました。")
break;
case error.TIMEOUT:
alert("現在位置を決定できませんでした。") 指定されたタイムアウト期間内に位置を決定できませんでした。")
Break;
case error.UNKNOWN_ERROR:
alert("不明なエラーのため、位置を特定できませんでした。")
Break;
}
}