HTML5 で HTML 地理位置情報を正しく使用するにはどうすればよいですか?

HTML5 が開発者にとってホットなトピックであることは疑いの余地がありません。 HTML5 関数の基本原理をすぐに理解する必要がある場合は、この記事では主に HTML5 地理位置情報について説明します。

HTML5 地理位置情報は

HTML5 地理位置情報 (地理位置情報) を使用して、ユーザーの位置を特定します。

ユーザーの位置を特定する

HTML5 Geolocation API は、ユーザーの地理的位置を取得するために使用されます。

この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーが同意しない限り、ユーザーの位置情報は取得できません。

ブラウザのサポート

Internet Explorer 9、Firefox、Chrome、Safari、Opera は位置情報をサポートしています。

注: iPhone などの GPS を備えたデバイスの場合、地理位置情報はより正確です。

HTML5 - 地理位置情報の使用

ユーザーの位置を取得するには getCurrentPosition() メソッドを使用してください。

次の例は、ユーザーの場所の経度と緯度を返す単純な地理位置情報の例です。

例は次のとおりです:

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

例の説明:

地理位置情報がサポートされているかどうかを検出します

サポートされている場合は、getCurrentPosition() メソッドを実行します。サポートされていない場合は、ユーザーにメッセージが表示されます。

getCurrentPosition() が正常に実行されると、パラメーター showPosition で指定された関数に座標オブジェクトが返されます

showPosition() 関数は、経度と緯度を取得して表示します

上記の例は、エラーのない非常に基本的な地理位置情報スクリプトです。対処する。

エラーと拒否の処理

getCurrentPosition() メソッドの 2 番目のパラメーターは、エラーを処理するために使用されます。ユーザーの位置情報の取得が失敗したときに実行する関数を指定します:

インスタンスもあります:

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

エラー コード:

権限が拒否されました - ユーザーは位置情報を取得できません

位置が利用できません - 現在の位置を取得できませんlocation

Timeout - 操作がタイムアウトしました

結果を地図に表示します

結果を地図に表示するには、Google マップや Baidu マップなどの緯度と経度を使用できる地図サービスにアクセスする必要があります:

また例:

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src=&#39;"+img_url+"&#39; />";
}

上記の例では、返された緯度と経度のデータを使用して、Google マップに位置を表示します (静止画像を使用)。

上記のリンクは、スクリプトを使用して、マーカー、ズーム、ドラッグのオプションを備えたインタラクティブな地図を表示する方法を示しています。

特定の場所の情報

このページでは、ユーザーの場所を地図上に表示する方法を説明します。ただし、地理位置情報は、特定の場所に関する情報としても役立ちます。

ローカル情報を更新

ユーザーの周囲の興味のある地点を表示

対話型カーナビゲーションシステム (GPS)

getCurrentPosition() メソッド - データを返す

成功すると、getCurrentPosition() メソッドはオブジェクトを返します。緯度、経度、精度のプロパティは常に返されます。利用可能な場合は、次の他のプロパティが返されます。

属性と説明:

coords.latitude (10進数としての緯度)

coords.longitude (10進数としての経度)

coords.accuracy (位置精度)

coords.altitude (標高、上空メートル単位)

coords.altitudeAccuracy (位置の標高精度)

coords.Heading (方向、真北からの度単位)

coords.speed (速度、メートル/秒)

timestamp (応答日/ Time)

Geolocation オブジェクト - その他の興味深いメソッド

watchPosition() - ユーザーの現在位置を返し、ユーザーが移動すると更新された位置を返し続けます (車の GPS のように)。

clearWatch() - watchPosition() メソッドを停止します

次の例は、watchPosition() メソッドを示しています。この例をテストするには、正確な GPS デバイス (iPhone など) が必要です:

実際の証拠があります:

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script

[関連する推奨事項]

HTML と HTML5 の開発の歴史

HTML の基本要素html、HTML をゼロから学ぼう

以上がHTML5 で HTML 地理位置情報を正しく使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。