<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation距离跟踪器</title>
</head>
<body onload="loadDemo()">
<h1>HTML5 Geolocation距离跟踪器</h1>
<p >该浏览器不支持HTML5 Geolocation。</p>
<h2>当前位置：</h2>
<table >
<tr>
<td width="40" scope="col">纬度</th>
<td width="114" >?</td>
</tr>
<tr>
<td>经度</td>
<td >?</td>
</tr>
<tr>
<td>准确度</td>
<td >?</td>
</tr>
</table>
<h4 >本次移动距离：0 千米</h4>
<h4 >总计移动距离：0 千米</h4>
<script type="text/javascript">
var totalDistance = 0.0;
var lastLat;
var lastLong;
function toRadians(degree) {
return this * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
// R是地球半径（KM）
var R = 6371;
var deltaLatitude = toRadians(latitude2-latitude1);
var deltaLongitude = toRadians(longitude2-longitude1);
latitude1 = toRadians(latitude1);
latitude2 = toRadians(latitude2);
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;
}
function updateStatus(message) {
document.getElementById("status").innerHTML = message;
}
function loadDemo() {
if(navigator.geolocation) {
updateStatus("浏览器支持HTML5 Geolocation。");
navigator.geolocation.watchPosition(updateLocation, handleLocationError, {maximumAge:20000});
}
}
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
document.getElementById("accuracy").innerHTML = accuracy;
// 如果accuracy的值太大，我们认为它不准确，不用它计算距离
if (accuracy >= 500) {
updateStatus("这个数据太不靠谱，需要更准确的数据来计算本次移动距离。");
return;
}
// 计算移动距离
if ((lastLat != null) && (lastLong != null)) {
var currentDistance = distance(latitude, longitude, lastLat, lastLong);
document.getElementById("currDist").innerHTML =
"本次移动距离：" + currentDistance.toFixed(4) + " 千米";
totalDistance += currentDistance;
document.getElementById("totalDist").innerHTML =
"总计移动距离：" + currentDistance.toFixed(4) + " 千米";
}
lastLat = latitude;
lastLong = longitude;
updateStatus("计算移动距离成功。");
}
function handleLocationError(error) {
switch(error.code)
{
case 0:
updateStatus("尝试获取您的位置信息时发生错误：" + error.message);
break;
case 1:
updateStatus("用户拒绝了获取位置信息请求。");
break;
case 2:
updateStatus("浏览器无法获取您的位置信息：" + error.message);
break;
case 3:
updateStatus("获取您位置信息超时。");
break;
}
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style>
#tripmeter {
border: 3px double black;
padding: 10px;
margin: 10px 0;
}
p {
color: #222;
font: 14px Arial;
}
span {
color: #00C;
}
</style>
</head>
<body>
<div >
<p>
Starting Location (lat, lon):<br/>
<span >???</span>°, <span >???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span >???</span>°, <span >???</span>°
</p>
<p>
Distance from starting location:<br/>
<span >0</span> km
</p>
</div>
<script>
window.onload = function() {
var startPos;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
document.getElementById("startLat").innerHTML = startPos.coords.latitude;
document.getElementById("startLon").innerHTML = startPos.coords.longitude;
}, function(error) {
alert("Error occurred. Error code: " + error.code);
// error.code can be:
// 0: unknown error
// 1: permission denied
// 2: position unavailable (error response from locaton provider)
// 3: timed out
});
navigator.geolocation.watchPosition(function(position) {
document.getElementById("currentLat").innerHTML = position.coords.latitude;
document.getElementById("currentLon").innerHTML = position.coords.longitude;
document.getElementById("distance").innerHTML =
calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
position.coords.latitude, position.coords.longitude);
});
}
};
// Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.
// http://www.movable-type.co.uk/scripts/latlong.html
// Under Creative Commons License http://creativecommons.org/licenses/by/3.0/
function calculateDistance(lat1, lon1, lat2, lon2) {
var R = 6371; // km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
return d;
}
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
</script>
</body>
</html>