使用HTML5 Geolocation實作距離追蹤器

HTML5 Geolocation（地理定位）用於定位使用者的位置。那麼如何實現一個距離追蹤器呢？我的思路是這樣的，前提是瀏覽器支援h5地理定位，在這個基礎上，獲取用戶位置，更新用戶位置，計算距離，顯示到頁面，這樣就簡單實現了一個距離追踪器，為了用戶更清楚地看到目前位置，這裡接入了百度地圖API。

頁面結構如下圖所示：

 <div id=container> <section> <article> <header> <h1>Your Location</h1> </header> <p class=info id=status>您的瀏覽器不支援HTML5 Geolocation。 </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 Geolocation

在body載入時呼叫loadDemo()方法，方法根據navigator.geolocation來判斷瀏覽器是否支援HTML5 Geolocation；如果navigator.geolocation為true，那麼我們就可以開始對使用者位置進行更新

HTML5可以透過getCurrentPosition() 方法來獲得使用者的位置。但這只取得一次，所以我們選用了watchPosition()這個方法，它能回到使用者目前的位置，並繼續回到使用者移動時的更新位置（就像汽車上的GPS）。

 navigator.geolocation.watchPosition(updateLocation, handleLocationError, { timeout: 10000 });

在不斷取得位置的同時，呼叫updateLocation這個方法，把位置狀況顯示在頁面上，當然也要呼叫計算距離的方法來取得距離，以及不斷更新百度地圖上的位置。

 var latitude = position.coords.latitude;var longitude = position.coords.longitude;var accuracy = position.coords.accuracy;var timestamp = position.timestamp;document.getElementById(latitude).ininner = 緯度latitude;document.getElementById(longitude).innerHTML = 經度: + longitude;document.getElementById(accuracy).innerHTML = 準確度: + accuracy;document.getElementById(timestamp).innerHTML = 戳時間：acc = 30000) { updateStatus(Need more accurate values to calculate distance.); return;}if((lastLat != null) && (lastLong != null)) { var currentDistance = distance(latitude, longitude, lastLat, lastLrentDistance = distance(latitude, longitude, lastLat, lastL. currDist).innerHTML =目前旅行距離: + currentDistance.toFixed(2) + km; totalDistance += currentDistance; document.getElementById(totalDist).innerHTML = 旅行總距離: + currentDistance.toFixed(2) + km; }lastLat = latitude;lastLong = longitude;

把開始位置和目前位置的經度緯度當作參數放入函數，透過換算，來計算距離（單位為km)

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

要用百度地圖API，你需要註冊百度帳號，申請成為百度開發者然後取得一個金鑰，才能使用相關服務戳記這根據文件你可以知道如何使用這個API 程式碼如下：

 var map = new BMap.Map(allmap); // 建立Map實例map.centerAndZoom(new BMap.Point(longitude, latitude), 14); //設定中心點座標和地圖層級map.addControl(new BMap.MapTypeControl ()); //新增地圖類型控制項map.setCurrentCity(南昌); //顯示城市,此項目必須設定map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放// 以下為目前位置標註設定var point = new BMap.Point(longitude, latitude); map.centerAndZoom(point, 14); var marker = new BMap.Marker(point); //建立標註map.addOverlay(marker); //將標註加入地圖中marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫// 百度地圖API功能--------end

<script type=text/javascript src=http://api.map.baidu.com/api?v=2.0&ak=你的金鑰></script>

以上所述是小編給大家介紹的使用HTML5 Geolocation實現一個距離追蹤器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！