HTML5 地理位置情報
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() 関数は、経度と緯度を取得して表示します
上記の例は、エラー処理のない非常に基本的な地理位置情報スクリプトです。
エラーと拒否の処理
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 マップや Baidu マップなどの緯度と経度を使用できる地図サービスにアクセスする必要があります。
<!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 マップ スクリプトを使用して、マーカー、ズーム、ドラッグ オプションを備えたインタラクティブな地図を表示する方法。
<!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 src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
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>プログラムを実行して試してみましょう
特定の場所の情報
このページでは、地図上にユーザーの場所を表示する方法を説明します。ただし、地理位置情報は、特定の場所に関する情報としても役立ちます。
例:
地域情報を更新する
ユーザーの周囲の興味のある場所を表示する
インタラクティブカーナビゲーションシステム (GPS)
getCurrentPosition() メソッド - データを返す
成功した場合、getCurrentPosition() メソッドはオブジェクトを返します。緯度、経度、精度のプロパティは常に返されます。利用可能な場合は、次の他のプロパティが返されます。
| プロパティ | 説明 |
| coords.latitude | 数値としての10進数の緯度 |
| coords.longitude | 10進数としての経度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 高度、海抜メートル単位 |
| coords.altitudeAccuracy | 位置の高度精度 |
| coords.Heading | 方向、真北からの度数 |
| coords.speed | 速度、メートル/秒 |
| タイムスタンプ | 応答の日時 |
Geolocation オブジェクト
watchPosition() - ユーザーの現在位置を返し、ユーザーが移動すると更新された位置を返し続けます (車の GPS と同じです) ）。
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>