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;
