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="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

分析の例:

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

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

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

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

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

function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用户拒绝对获取地理位置的请求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="请求用户地理位置超时。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知错误。"
      break;
    }
  }

エラー コード:

権限が拒否されました - ユーザーに位置情報は許可されていません

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

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

地図で結果を表示

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

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; alt="HTML5 地理位置情報の例の説明" >";
}

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

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

特定の場所の情報

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

例:

ローカル情報を更新

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

インタラクティブカーナビゲーションシステム(GPS)

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

T成功した場合、getCurrentPosition()メソッドはオブジェクトを返します。緯度、経度、精度のプロパティは常に返されます。

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="该浏览器不支持获取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="纬度: " + position.coords.latitude + 
  "<br>经度: " + position.coords.longitude; 
  }
</script>

【関連推奨事項】

1. 特別な推奨事項: 「php Programmer Toolbox」V0.1 バージョンのダウンロード

2. 無料の h5 オンラインビデオチュートリアル

3.

php.cn オリジナルの HTML5 ビデオチュートリアル

以上がHTML5 地理位置情報の例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。