HTML5 Geolocation API获取地理位置
2013-03-20 14:56
501 查看
Geolocation API
// var totalDistance = 0.0;
var lastLat = null;
var lastLong = null;
function toRadians(degree) {
return degree * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
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 $(id) {
return document.getElementById(id);
}
function updateStatus(message) {
document.getElementById('status').innerHTML = message;
}
function loadDemo() {
if (navigator.geolocation) {
updateStatus("");
navigator.geolocation.watchPosition(updateLocation, handleLocationError, {
maxmumAge : 20000
});
}
}
window.addEventListener('load', loadDemo, true);
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
$('latitude').innerHTML = latitude;
$('longitude').innerHTML = longitude;
$('accuracy').innerHTML = '这个位置的精确度在 ' + accuracy + ' 米。';
$('timestamp').innerHTML = timestamp;
if ((lastLat !== null) && (lastLong !== null)) {
var currentDistance = distance(latitude, longitude, lastLat, lastLong);
$('currDist').innerHTML = '目前的距离:' + currentDistance.toFixed(4)* 1000 + ' m';
totalDistance += currentDistance;
alert(currentDistance);
$('totalDist').innerHTML = '总距离：' + totalDistance.toFixed(4)*1000 + ' m';
}
lastLat = latitude;
lastLong = longitude;
updateStatus("位置成功更新!");
}
function handleLocationError(err) {
switch (err.code) {
case 1:
alert('位置服务被拒绝');
break;
case 2:
alert('获取不到位置信息');
break;
case 3:
alert('获取信息超时');
break;
default:
alert('未知错误！');
}
}
// ]]>
纬度：
经度：
精确度：
// var totalDistance = 0.0;
var lastLat = null;
var lastLong = null;
function toRadians(degree) {
return degree * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
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 $(id) {
return document.getElementById(id);
}
function updateStatus(message) {
document.getElementById('status').innerHTML = message;
}
function loadDemo() {
if (navigator.geolocation) {
updateStatus("");
navigator.geolocation.watchPosition(updateLocation, handleLocationError, {
maxmumAge : 20000
});
}
}
window.addEventListener('load', loadDemo, true);
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
$('latitude').innerHTML = latitude;
$('longitude').innerHTML = longitude;
$('accuracy').innerHTML = '这个位置的精确度在 ' + accuracy + ' 米。';
$('timestamp').innerHTML = timestamp;
if ((lastLat !== null) && (lastLong !== null)) {
var currentDistance = distance(latitude, longitude, lastLat, lastLong);
$('currDist').innerHTML = '目前的距离:' + currentDistance.toFixed(4)* 1000 + ' m';
totalDistance += currentDistance;
alert(currentDistance);
$('totalDist').innerHTML = '总距离：' + totalDistance.toFixed(4)*1000 + ' m';
}
lastLat = latitude;
lastLong = longitude;
updateStatus("位置成功更新!");
}
function handleLocationError(err) {
switch (err.code) {
case 1:
alert('位置服务被拒绝');
break;
case 2:
alert('获取不到位置信息');
break;
case 3:
alert('获取信息超时');
break;
default:
alert('未知错误！');
}
}
// ]]>
纬度：
经度：
精确度：
<!DOCTYPE HTML>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Geolocation API</title>
<script type="text/javascript">
var totalDistance = 0.0;
var lastLat = null;
var lastLong = null;
function toRadians(degree) {
return degree * Math.PI / 180;
}
function distance(latitude1, longitude1, latitude2, longitude2) {
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 $(id) {
return document.getElementById(id);
}
function updateStatus(message) {
document.getElementById('status').innerHTML = message;
}
function loadDemo() {
if (navigator.geolocation) {
updateStatus("");
navigator.geolocation.watchPosition(updateLocation, handleLocationError, {
maxmumAge : 20000
});
}
}
window.addEventListener('load', loadDemo, true);
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
$('latitude').innerHTML = latitude;
$('longitude').innerHTML = longitude;
$('accuracy').innerHTML = '这个位置的精确度在 ' + accuracy + ' 米。';
$('timestamp').innerHTML = timestamp;
if ((lastLat !== null) && (lastLong !== null)) {
var currentDistance = distance(latitude, longitude, lastLat, lastLong);
$('currDist').innerHTML = '目前的距离:' + currentDistance.toFixed(4)* 1000 + ' m';
totalDistance += currentDistance;
alert(currentDistance);
$('totalDist').innerHTML = '总距离：' + totalDistance.toFixed(4)*1000 + ' m';
}
lastLat = latitude;
lastLong = longitude;
updateStatus("位置成功更新!");
}
function handleLocationError(err) {
switch (err.code) {
case 1:
alert('位置服务被拒绝');
break;
case 2:
alert('获取不到位置信息');
break;
case 3:
alert('获取信息超时');
break;
default:
alert('未知错误！');
}
}
</script>
</head>
<body>
<div>纬度：<span id="latitude"></span></div>
<div>经度：<span id="longitude"></span></div>
<div>精确度：<span id="accuracy"></span></div>
<div><span id="timestamp"></span></div>
<h4 id="currDist"></h4>
<h4 id="totalDist"></h4>
<div id="status"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5 Geolocation API (地理位置应用程序接口)获取地理位置
- 基于HTML5的Geolocation获取地理位置，配合Google Map API反向地址解析（获取用户真实地址）
- 基于HTML5的Geolocation获取地理位置，配合Google Map API反向地址解析（获取用户真实地址）
- 利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
- 利用HTML5中Geolocation获取地理位置在Google Map上定位
- Html5 Geolocation获取地理位置信息(转)
- html5 navigator.geolocation基于浏览器获取地理位置
- html5获取地理位置 利用百度地图JavaScript API标注
- html5获取地理位置信息API
- HTML5地理位置定位Geolocation-API及Haversine地理空间距离算法
- HTML5 中 Geolocation 获取地理位置的原理是什么？
- Html5 Geolocation获取地理位置信息
- HTML5 geolocation API 获得用户当前地理位置 推荐
- HTML5 Geolocation获取地理位置
- 利用HTML5中Geolocation获取地理位置在Google Map上定位
- 关于HTML5 地理位置geolocation API 的一些事
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息