Html5 Geolocation demo

时间:2023-03-09 20:19:34
Html5 Geolocation demo
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Geolocation距离跟踪器</title>
</head> <body onload="loadDemo()"> <h1>HTML5 Geolocation距离跟踪器</h1> <p id="status">该浏览器不支持HTML5 Geolocation。</p> <h2>当前位置:</h2>
<table border="1">
<tr>
<td width="40" scope="col">纬度</th>
<td width="114" id="latitude">?</td>
</tr>
<tr>
<td>经度</td>
<td id="longitude">?</td>
</tr>
<tr>
<td>准确度</td>
<td id="accuracy">?</td>
</tr>
</table> <h4 id="currDist">本次移动距离:0 千米</h4>
<h4 id="totalDist">总计移动距离: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 id="tripmeter">
<p>
Starting Location (lat, lon):<br/>
<span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;
</p>
<p>
Distance from starting location:<br/>
<span id="distance">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>​