<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>

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

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;

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;
   }

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>