今日学習するのは、Geolocation を使用して測位機能を実装することです。 Geolocation オブジェクトは、次のメソッドを提供する navigator.geolocation を通じて取得できます。
getCurrentPosition(callback,errorCallback,options): 現在の位置を取得します。
watchPosition(callback,error,options): 現在の位置の監視を開始します。 Position;
clearWatch(id): 現在位置の監視を停止します。
注: 以下の例で使用されているブラウザは chrome です。他のブラウザを使用している場合、実行結果が例で表示される結果と一致するかどうかは保証できません。
1. 現在位置を取得します。
現在位置を取得するには、位置情報が直接返されません。処理用のコールバック関数。座標の取得には時間がかかるため、アクセス許可を求められます。次の例を見てみましょう:
経度:
| /td>
緯度:
| -
;
|
高度:
|
- |
精度:
| - |
高度精度:
| - |
見出し: |
- | 🎜>< /tr>
速度:
| | タイムスタンプ: |
<script> <br>navigator.geolocation.getCurrentPosition(displayPosition); <br>function displayPosition(pos) { <br>var プロパティ = ['経度', '緯度', '精度', '高度精度', '見出し ', '速度']; <br>for (var i = 0, len = property.length; i < len; i ) { <br />var value = pos.coords[properties[i]] ; <br /> document.getElementById(properties[i]).innerHTML = 値; <br />} <br />document.getElementById('timestamp').innerHTML = <br />} <br /></ script> <br></body> <br></html> <br><br><br> 返される位置オブジェクトには、座標情報のタイムスタンプが含まれます。が得られました。その中で、座標には次の属性が含まれます: 緯度: 緯度、経度: 高度、精度: 高度: 進行方向、速度: 2番目） 。 <br>ブラウザをホストしているデバイスによっては、すべての情報が返されるわけではありません。 GPS、加速度計、コンパスを備えたモバイル デバイスはほとんどの情報を返しますが、家庭用コンピュータは返しません。自宅のパソコンが取得する位置情報は、ネットワーク環境やwifiに依存します。上の例の結果を見てみましょう。 <br>
<br><br><br>
<br>「許可」をクリックして座標情報を取得します。 <br>
<br><br><br>
2. 例外の処理 <br> <br>次に、errorCallback コールバック関数を使用して実装される getCurrentPosition の例外処理を紹介します。関数によって返されるパラメーター error には、code: エラーの種類コード、message: エラー メッセージの 2 つの属性が含まれます。コードには 3 つの値が含まれています: 1: ユーザーは地理位置情報を使用する権限がありません。 2: 座標情報を取得できません。 3: 情報を取得するためのタイムアウトです。 <br>以下の例を見てみましょう: <p><img alt="" src="http://files.jb51.net/file_images/article/201301/201301071613068.png"></p>
<br><br><p>コードをコピーします<img alt="" src="http://files.jb51.net/file_images/article/201301/201301071613069.png"></p>
<strong>コードは次のとおりです:</strong><div class="msgborder" id="phpcode123"> <br><!DOCTYPE HTML> <br> <br> <br><title>例</title> <br> <br>table{border-collapse: Collapse;} <br>th, td{padding: 4px;} <br>th{text-align: right;} <br></style> <br></head> <br> <br><table border="1"> <br><tr> <br><th>経度:</th> <br><td id="経度">-</td> <br><th>緯度:</th> <br><td id="緯度">-</td> <br></tr> <br>
</tr>
<tr> <br><th>高度:</th> <br><td id="高度">-</td> <br><th>精度:</th> <br><td id="精度">-</td> <br></tr> <br>
</tr>
<tr> <br><th>高度精度:</th> <br><td id="高度精度">-</td> <br><th>見出し:</th> <br><td id="見出し">-</td> <br></tr> <br>
</tr>
<tr> <br><th>速度:</th> <br><td id="speed">-</td> <br><th>タイムスタンプ:</th> <br><td id="timestamp">-</td> <br></tr> <br>
</tr>
<tr> <br><th>エラーコード:</th> <br><td id="errcode">-</td> <br><th>エラーメッセージ:</th> <br><td id="errmessage">-</td> <br></tr> <br></table> <br> <br>navigator.geolocation.getCurrentPosition(displayPosition, handleError); <br>function displayPosition(pos) { <br>var プロパティ = ["経度", "緯度", "高度", "精度", "高度精度", "方位", "速度"]; <br>for (var i = 0; i <properties.length i></properties.length>var value = pos.coords[properties[i]]; <br>document.getElementById(properties[i]).innerHTML = 値; <br>} <br>document.getElementById("timestamp").innerHTML = pos.timestamp; <br>} <br>function handleError(err) { <br>document.getElementById("errcode").innerHTML = err.code; <br>document.getElementById("errmessage").innerHTML = err.message; <br>} <br></script>
