HTML5 地理位置情報
HTML5 地理位置情報は、ユーザーの位置を特定するために使用されます。
ユーザーの位置を特定する
HTML5 Geolocation API は、ユーザーの地理的位置を取得するために使用されます。
この機能はユーザーのプライバシーを侵害する可能性があるため、ユーザーが同意しない限り、ユーザーの位置情報は取得できません。
ブラウザのサポート
Internet Explorer 9以降、Firefox、Chrome、Safari、Operaは地理位置情報をサポートします。
注: GPSを備えたデバイス（iPhoneなど）の地理位置情報（地理位置情報）は、より正確です。
HTML5 - 地理位置情報の使用
ユーザーの位置を取得するには getCurrentPosition() メソッドを使用してください。
次の例は、ユーザーの位置の経度と緯度を返す単純な地理位置情報の例です:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>
</body>
</html>インスタンスの実行»
オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックします
インスタンス分析:
地理位置情報がサポートされているかどうかを検出します
サポートされている場合は、getCurrentPosition()メソッドを実行します。サポートされていない場合は、ユーザーにメッセージが表示されます。
getCurrentPosition() が正常に実行されると、パラメータ showPosition で指定された関数に座標オブジェクトが返されます
showPosition() 関数は経度と緯度を取得して表示します
上記の例は非常に基本的なものですgeography エラー処理を行わない位置決めスクリプト。
エラーと拒否の処理
getCurrentPosition() メソッドの 2 番目のパラメーターは、エラーを処理するために使用されます。ユーザーの位置情報の取得に失敗したときに実行する関数を指定します:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
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;
}
}
</script>
</body>
</html>インスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
エラーコード:
-
権限が拒否されました - ユーザーの地理位置情報は許可されていません
位置が利用できません - 現在の場所を取得できません
タイムアウト - 操作がタイムアウトしました
結果を地図に表示します
結果を地図に表示するには、にアクセスする必要があります緯度と経度が利用可能 Google マップや百度マップなどの地図サービス:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
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='"+img_url+"'>";
}
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;
}
}
</script>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
上記の例では、返された緯度と経度のデータを使用して、Google マップに位置を表示します (静止画像を使用)。
Google マップ スクリプト
上記のリンクは、スクリプトを使用して、マーカー、ズーム、ドラッグ オプションを備えたインタラクティブな地図を表示する方法を示しています。
特定の場所の情報
このページでは、ユーザーの場所を地図上に表示する方法を説明します。ただし、地理位置情報は、特定の場所に関する情報としても役立ちます。新しい例: 本 ローカル情報を更新します
- ユーザーの周囲の興味を表示します
- 対話型車両ナビゲーション システム (GPS)
- GetCurrentPosition () メソッド - データを返します T 、 getCurrentPosition() メソッドが戻りますオブジェクト。緯度、経度、精度のプロパティは常に返されます。利用可能な場合は、次の他のプロパティが返されます。
プロパティ説明
| coords.latitude | 10進数としての緯度 |
|---|---|
| coords.longitude | 10進数としての経度 |
| 座標.精度 | 位置精度 |
| coords.altitude | 標高、海抜メートル単位 |
| coords.altitudeAccuracy | 位置の標高精度 |
| coords.Heading | 方向、真北からの度単位 |
| コーディネート。 | 速度、メートル/秒 |
| timestamp | 応答の日付/時刻 |
| Geolocationオブジェクト - その他の興味深いメソッド |
clearWatch() - watchPosition() メソッドを停止します
次の例は、watchPosition() メソッドを示しています。この例をテストするには、正確な GPS デバイス (iPhone など) が必要です:
インスタンス<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<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>
</body>
</html>
