今日私たちが学びたいのは、ジオロケーションを使用してポジショニング機能を実装することです。 Navigation.Geolocationを使用してジオロケーションオブジェクトを取得できます。これは、次の方法を提供します。
GetCurrentPosition（CallBack、ErrorCallback、Options）：現在の場所を取得します。
WatchPosition（コールバック、エラー、オプション）：現在の位置の監視を開始します。
ClearWatch（ID）：現在の場所の監視を停止します。
注：次の例で使用されているブラウザはChromeです。他のブラウザを使用して、実行結果が例で表示された結果と一致することを保証することはできません。
1.現在の場所を取得しますGetCurrentPositionメソッドを使用して、現在の位置を取得します。位置情報は、結果の形で直接返されません。コールバック関数を使用して処理する必要があります。座標の取得には多少の遅延があります。また、アクセス許可を求めます。次の例を見てみましょう。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
テーブル{境界線崩壊：崩壊;}
th、td {padding：4px;}
th {text-align：right;}
</style>
</head>
<body>
<表>
<tr>
<th>経度：</th>
<td id = "経度"> - </td>
<th>緯度：</th>
<td id = "latitude"> - </td>
</tr>
<tr>
<th>高度：</th>
<td id = "高度"> - </td>
<th>精度：</th>
<td id = "精度"> - </td>
</tr>
<tr>
<th>高度精度：</th>
<td id = "altitudeaccuracy"> - </td>
<th>見出し：</th>
<td id = "見出し"> - </td>
</tr>
<tr>
<th>速度：</th>
<td id = "speed"> - </td>
<th>タイムスタンプ：</th>
<td id = "Timestamp"> - </td>
</tr>
</table>
<スクリプト>
navigator.geolocation.getCurrentPosition（displayposition）;
関数displayposition（pos）{
var Properties = ['経大'、「緯度」、「高度」、「高度」、「精度」、「高度」、「見出し」、「速度」];
for（var i = 0、len = properties.length; i <len; i ++）{
var value = pos.coords [Properties [i]];
document.getElementById（Properties [i]）。innerhtml = value;
}
document.getElementById（ 'Timestamp'）。innerhtml = pos.timestamp;
}
</script>
</body>
</html>
返された位置オブジェクトには、2つのプロパティ、座標が含まれています。タイムスタンプ：座標情報を取得する時間。その中で、座標には次の特性が含まれています。緯度：緯度;経度：経度;高度：高さ;精度：精度（メーター）; AltitudeAccuracy：高さの精度（メーター）;見出し：旅行方向。速度：移動速度（メーター/秒）。
すべての情報が返されるわけではなく、ブラウザをホストするデバイスに依存します。 GPS、アクセラレータ、コンパスなどのモバイルデバイスはほとんどの情報を返しますが、ホームコンピューターは機能しません。ホームコンピューターによって取得された位置情報は、ネットワーク環境またはWiFiに依存します。上記の例の実行結果を見てみましょう。
[許可]をクリックして調整情報を取得します。
2。例外を処理します次に、ErrorCallbackコールバック関数を使用して実装されるGetCurrentPositionの例外処理を紹介します。関数によって返されるパラメーターエラーには、コードの2つのプロパティが含まれています。エラータイプのコード。メッセージ：エラーメッセージ。コードには3つの値が含まれています。1：ユーザーはジオロケーションの使用を許可されていません。 2：座標情報を取得できません。 3：情報タイムアウトが取得されます。
以下の例を見てみましょう。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
テーブル{境界線崩壊：崩壊;}
th、td {padding：4px;}
th {text-align：right;}
</style>
</head>
<body>
<表>
<tr>
<th>経度：</th>
<td id = "経度"> - </td>
<th>緯度：</th>
<td id = "latitude"> - </td>
</tr>
<tr>
<th>高度：</th>
<td id = "高度"> - </td>
<th>精度：</th>
<td id = "精度"> - </td>
</tr>
<tr>
<th>高度精度：</th>
<td id = "altitudeaccuracy"> - </td>
<th>見出し：</th>
<td id = "見出し"> - </td>
</tr>
<tr>
<th>速度：</th>
<td id = "speed"> - </td>
<th>タイムスタンプ：</th>
<td id = "Timestamp"> - </td>
</tr>
<tr>
<th>エラーコード：</th>
<td id = "errcode"> - </td>
<th>エラーメッセージ：</th>
<td id = "errmessage"> - </td>
</tr>
</table>
<スクリプト>
navigator.geolocation.getCurrentPosition（displayposition、handleerror）;
関数displayposition（pos）{
varプロパティ= ["経度"、「緯度 "、「高度」、「精度」、「高度」、「見出し」、「速度」];
for（var i = 0; i <properties.length; i ++）{
var value = pos.coords [Properties [i]];
document.getElementById（Properties [i]）。innerhtml = value;
}
document.getElementById（ "Timestamp"）。innerhtml = pos.timestamp;
}
function handleError（err）{
document.getElementById（ "errcode"）。innerhtml = err.code;
document.getElementById（ "errmessage"）。innerhtml = err.message;
}
</script>
</body>
</html>
許可は拒否され、操作結果：
3.ジオロケーションオプションのパラメーター項目を使用しますgetCurrentPositionのオプション（コールバック、エラーコールバック、オプション）には、使用する次のパラメーターがあります。タイムアウト：タイムアウト（ミリ秒）;最大値：キャッシュ時間（ミリ秒）を指定します。次の例を見てみましょう。
<！doctype html>
<html>
<head>
<title>例</title>
<style>
テーブル{境界線崩壊：崩壊;}
th、td {padding：4px;}
th {text-align：right;}
</style>
</head>
<body>
<表>
<tr>
<th>経度：</th>
<td id = "経度"> - </td>
<th>緯度：</th>
<td id = "latitude"> - </td>
</tr>
<tr>
<th>高度：</th>
<td id = "高度"> - </td>
<th>精度：</th>
<td id = "精度"> - </td>
</tr>
<tr>
<th>高度精度：</th>
<td id = "altitudeaccuracy"> - </td>
<th>見出し：</th>
<td id = "見出し"> - </td>
</tr>
<tr>
<th>速度：</th>
<td id = "speed"> - </td>
<th>タイムスタンプ：</th>
<td id = "Timestamp"> - </td>
</tr>
<tr>
<th>エラーコード：</th>
<td id = "errcode"> - </td>
<th>エラーメッセージ：</th>
<td id = "errmessage"> - </td>
</tr>
</table>
<スクリプト>
var options = {
EnableHighAccuracy：false、
タイムアウト：2000、
最大値：30000
};
navigator.geolocation.getCurrentPosition（displayposition、handleerror、options）;
関数displayposition（pos）{
varプロパティ= ["経度"、「緯度 "、「高度」、「精度」、「高度」、「見出し」、「速度」];
for（var i = 0; i <properties.length; i ++）{
var value = pos.coords [Properties [i]];
document.getElementById（Properties [i]）。innerhtml = value;
}
document.getElementById（ "Timestamp"）。innerhtml = pos.timestamp;
}
function handleError（err）{
document.getElementById（ "errcode"）。innerhtml = err.code;
document.getElementById（ "errmessage"）。innerhtml = err.message;
}
</script>
</body>
</html>
4.場所の変更を監視します以下に、WatchPositionメソッドの使用を紹介して、位置の変更を実装します。その使用方法は、GetCurrentPositionと同じです。例を見てみましょう：
<！doctype html>
<html>
<head>
<title>例</title>
<style>
テーブル{境界線崩壊：崩壊;}
th、td {padding：4px;}
th {text-align：right;}
</style>
</head>
<body>
<表>
<tr>
<th>経度：</th>
<td id = "経度"> - </td>
<th>緯度：</th>
<td id = "latitude"> - </td>
</tr>
<tr>
<th>高度：</th>
<td id = "高度"> - </td>
<th>精度：</th>
<td id = "精度"> - </td>
</tr>
<tr>
<th>高度精度：</th>
<td id = "altitudeaccuracy"> - </td>
<th>見出し：</th>
<td id = "見出し"> - </td>
</tr>
<tr>
<th>速度：</th>
<td id = "speed"> - </td>
<th>タイムスタンプ：</th>
<td id = "Timestamp"> - </td>
</tr>
<tr>
<th>エラーコード：</th>
<td id = "errcode"> - </td>
<th>エラーメッセージ：</th>
<td id = "errmessage"> - </td>
</tr>
</table>
<ボタンID = "pressme">キャンセル</button>
<スクリプト>
var options = {
EnableHighAccuracy：false、
タイムアウト：2000、
最大値：30000
};
var watchid = navigator.geolocation.watchposition（displayposition、handleerror、options）;
document.getElementById（ "pressme"）。onclick = function（e）{
navigator.geolocation.clearwatch（watchID）;
};
関数displayposition（pos）{
varプロパティ= ["経度"、「緯度 "、「高度」、「精度」、「高度」、「見出し」、「速度」];
for（var i = 0; i <properties.length; i ++）{
var value = pos.coords [Properties [i]];
document.getElementById（Properties [i]）。innerhtml = value;
}
document.getElementById（ "Timestamp"）。innerhtml = pos.timestamp;
}
function handleError（err）{
document.getElementById（ "errcode"）。innerhtml = err.code;
document.getElementById（ "errmessage"）。innerhtml = err.message;
}
</script>
</body>
</html>
キャンセルウォッチボタンをクリックすると、監視が停止します。
デモのダウンロードアドレス：html5guide.geolocation.zip