html5 ガイド-4. 地理位置情報を使用して測位機能を実装する_html5 チュートリアルスキル-H5 チュートリアル-php.cn

html5 ガイド-4. 地理位置情報を使用して測位機能を実装する_html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:50:18

オリジナル

1500 人が閲覧しました

今日学習するのは、Geolocation を使用して測位機能を実装することです。 Geolocation オブジェクトは、次のメソッドを提供する navigator.geolocation を通じて取得できます。
getCurrentPosition(callback,errorCallback,options): 現在の位置を取得します。
watchPosition(callback,error,options): 現在の位置の監視を開始します。 Position;
clearWatch(id): 現在位置の監視を停止します。
注: 以下の例で使用されているブラウザは chrome です。他のブラウザを使用している場合、実行結果が例で表示される結果と一致するかどうかは保証できません。
1. 現在位置を取得します。
現在位置を取得するには、位置情報が直接返されません。処理用のコールバック関数。座標の取得には時間がかかるため、アクセス許可を求められます。次の例を見てみましょう:

コードをコピーします

コードは次のとおりです:

🎜>< /tr>

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

开绝授权，运行结果：

3. geolocation オプションのパラメータを使用します
getCurrentPosition(callback,errorCallback,options) 内のオプションには次のようなパラメータが使用できます。enableHighAccuracy：最高の効果を使用します。timeout：超過時間（秒）。最大年齢：存続時間（秒）を指定します。 >

例

table{border-collapse: Collapse;}
th, td{padding: 4px;}
th{text-align: right;}

経度:	/td> 緯度:	- ;	高度:	-	精度:	-	高度精度:	-	見出し:	-	速度:		タイムスタンプ:

経度:	-	緯度:	-
高度:	-	精度:	-
高度精度:	-	見出し:	-
速度:	-	タイムスタンプ:	-
エラーコード:	-	エラーメッセージ:	-

复制代码

代码如下:

例

table{border-collapse: Collapse;}
th, td{padding: 4px;}
th{text-align: right;}

経度:	-	緯度:	-
高度:	-	精度:	-
高度精度:	-	見出し:	-
速度:	-	タイムスタンプ:	-
エラーコード:	-	エラーメッセージ:	-

var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options);
document.getElementById("pressme").onclick = function (e) {
navigator.geolocation.clearWatch(watchID);
};
function displayPosition(pos) {
var プロパティ = ["経度", "緯度", "高度", "精度", "高度精度", "方位", "速度"];
for (var i = 0; i var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = 値;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}

現在ポイントが視聴をキャンセルすると、監視を停止します。
デモダウンロード地址：Html5Guide.Geolocation.zip