HTML5 地理位置情報を使用して距離トラッカーを実装する

HTML5 地理位置情報は、ユーザーの位置を特定するために使用されます。では、距離トラッカーを実装するにはどうすればよいでしょうか?私のアイデアは、ブラウザが h5 地理位置情報をサポートしていることを前提としています。これに基づいて、ユーザーの位置が取得され、距離が計算され、ページに表示されます。ユーザーにとってわかりやすくするために実装されただけで、Baidu Map API に接続されているため、現在位置を直接確認できます。

ページの構造は次のとおりです。

 <div id=container> <section> <article> <header> <h1>現在地</h1> </header> <p class=info id=status>お使いのブラウザは HTML5 地理位置情報をサポートしていません。 </p> <div class=geostatus> <p id=latitude>緯度: </p> <p id=longitude>経度: </p> <p id=accuracy>精度: </p> <p id = timestamp>タイムスタンプ: </p> <p id=currDist>現在の移動距離: </p> <p id=totalDist>総移動距離: </p> </div> </article> </section> <!-- 百度地図の位置表示--> <div id=allmap></div> </div>

ブラウザが HTML5 地理位置情報をサポートしているかどうかを確認する

本文がロードされると、loadDemo() メソッドが呼び出されます。このメソッドは、navigator.geolocation に基づいてブラウザが HTML5 地理位置情報をサポートしているかどうかを判断します。navigator.geolocation が true の場合は、ユーザーの位置情報の取得と更新を開始できます。

HTML5 は getCurrentPosition() メソッドを通じてユーザーの位置を取得できます。ただし、これは一度しか取得されないため、ユーザーの現在位置を返し、ユーザーが移動すると更新された位置を返し続ける watchPosition() メソッドを選択しました (車の GPS と同じです)。

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, { タイムアウト: 10000 });

位置を取得し続けながら、updateLocation メソッドを呼び出してページ上に位置を表示します。もちろん距離計算メソッドも呼び出して距離を取得し、Baidu 地図上の位置を常に更新します。

 var latitude =position.coords.latitude;var longitude =position.coords.longitude;var precision =position.coords.accuracy;var timestamp =position.timestamp;document.getElementById(latitude).innerHTML = latitude: + latitude;document。 getElementById(経度).innerHTML = 経度: +経度;document.getElementById(精度).innerHTML = 精度: + 精度;document.getElementById(タイムスタンプ).innerHTML = タイムスタンプ: + タイムスタンプ;if(精度 >= 30000) { updateStatus(距離を計算するには、より正確な値が必要です。 ); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distance(緯度, 経度, lastLat, lastLong); document.getElementById(currDist).innerHTML = 現在の移動距離: + currentDistance.toFixed(2) + km; document.getElementById(totalDist); innerHTML = 総移動距離: + currentDistance.toFixed(2) + updateStatus(Location;正常に更新されました。);}lastLat = 緯度;lastLong = 経度;

関数に出発地と現在位置の経度、緯度をパラメータとして入れ、距離（単位：km）を換算して計算します

Number.prototype.toRadians = function() { return this * Math.PI / 180; }function distance(緯度1, 経度1, 緯度2, 経度2) { var R = 6371; var deltaLatitude = (緯度2 - 緯度1).toRadians(); var deltaLongitude = (経度2 - 経度1).toRadians(); latitude1.toRadians(), latitude2 = latitude2.toRadians(); var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(latitude1) * Math.cos(latitude2) * Math .sin(デルタ経度 / 2) * Math.sin(デルタ経度 / 2); 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c;

Baidu Map API を使用するには、Baidu アカウントを登録し、Baidu 開発者になるために申請し、関連サービスを使用するためのキーを取得する必要があります。ドキュメントによると、この API の使用方法は次のとおりです。

 var map = new BMap.Map(allmap); //マップ インスタンスを作成します。map.centerAndZoom(new BMap.Point(longitude, latitude), 14) //中心点の座標とマップ レベルを設定します。map.addControl(new BMap) .MapTypeControl ()); //マップ タイプ コントロールを追加します。map.setCurrentCity(Nachang); //都市を表示します。この項目は設定する必要があります。map.enableScrollWheelZoom(true); //マウスホイールズームを有効にする//以下は現在位置ラベルの設定です。 var point = new BMap.Point(longitude, latitude); (point, 14 ); var marker = new BMap.Marker(point); // マーカーを作成します。 //地図にマーカーを追加します。 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //バウンスアニメーション//Baidu地図API関数--------終了

<script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=あなたのキー></script>

上記は、HTML5 地理位置情報を使用して距離トラッカーを実装する方法についての編集者による紹介です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！