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").innerHTML = "緯度: " + latitude;
document.getElementById("longitude").innerHTML = "經度: " + longitude;
document.getElementById("accuracy").innerHTML = "準確度: " + accuracy;
document.getElementById("timestamp").innerHTML = "時間戳: " + timestamp;
if(accuracy >= 30000) {
updateStatus("Need more accurate values to calculate distance.");
return;
}
if((lastLat != null) && (lastLong != null)) {
var currentDistance = distance(latitude, longitude, lastLat, lastLong);
document.getElementById("currDist").innerHTML = "目前旅行距離: " + currentDistance.toFixed(2) + "km";
totalDistance += currentDistance;
document.getElementById("totalDist").innerHTML = "旅行總距離: " + currentDistance.toFixed(2) + "km";
updateStatus("Location successfully updated.");
}
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 - latitude1).toRadians();
var deltaLongitude = (longitude2 - longitude1).toRadians();
latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
var a = Math.sin(deltaLatitude / 2) * Math.sin(deltaLatitude / 2) + Math.cos(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，你需要註冊百度賬號，申請成為百度開發者然後獲取一個金鑰，才能使用相關服務 戳這 根據文件你可以知道如何使用這個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標籤
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的金鑰" ></script>
複製程式碼效果展示
我的部落格，歡迎交流！