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>°, <span id="startLon">???</span>°
</p>
<p>
Current Location (lat, lon):<br/>
<span id="currentLat">???</span>°, <span id="currentLon">???</span>°
</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>
Html5 Geolocation demo的更多相关文章
- HTML5 Geolocation API地理定位整理（二）
Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...
- HTML5 Geolocation用来定位用户的位置。
HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...
- HTML5: HTML5 Geolocation（地理定位）
ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...
- HTML5 地理位置定位（HTML5 Geolocation）原理及应用
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- 基于HTML5 geolocation 实现的天气预报功能
最近一直在学习HTML5,因为8月份要开发手机项目了.所以先把HTML5学习下. 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置. 2. 根据 ...
- HTML5 Geolocation 构建基于地理位置的 Web 应用
HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...
- html5 geolocation API
清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, op ...
- Qt WebKit and HTML5 geolocation | Qt Project forums | Qt Project
Qt WebKit and HTML5 geolocation | Qt Project forums | Qt Project Qt WebKit and HTML5 geolocation I ...
- html5 Geolocation(地理位置定位)学习
1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...
随机推荐
- Unity3D学习笔记——递归+非递归遍历GameObject的子物体
在Unity3D中没有提供直接的方法获取某个GameObject的子GameObject,但是所有的GameObject都有transform对象,所以,一般是通过获取子GameObject的tran ...
- android apk 自我保护技术-加密apk
经过了忙碌的一周终于有时间静下来写点东西了,我们继续介绍android apk防止反编译技术的另一种方法.前两篇我们讲了加壳技术(http://my.oschina.net/u/2323218/blo ...
- CSS3 绘制360安仔小精灵[原创]
Css3图形通常由矩形,圆形,椭圆,三角形,梯形等组合而成. 矩形,为display:block的块级元素设定宽高,便能实现, 圆角矩形,椭圆,圆形,则通过border-radius 属性来得到. 圆 ...
- xcodebuild和xcrun实现自动打包iOS应用程序
随着苹果手持设备用户的不断增加,ios应用也增长迅速,同时随着iphone被越狱越来越多的app 的渠道也不断增多,为各个渠道打包成了一件费时费力的工作,本文提供一种比较智能的打包方式来减少其带来的各 ...
- 使用fwrite()函数和fprintf()函数输出数据到文件时的区别
使用书上的一个课后题为例 有5个学生,每个学生有3门课的成绩,从键盘输入学生数据(包括学号,姓名,3们课程成绩),计算出每个学生的平均成绩,将原有数据和计算出的平均分数存放在磁盘文件“stud”中. ...
- PowerDesigner(三)-企业架构模型（转）
企业架构模型(Enterprise Architecture Model,EAM)是PowerDesigner 15新增的功能,它能够以图形的方式展现企业架构,从而取代文字描述:以偏向非技术性的表达方 ...
- 用CSS3制作的旋转六面体动画
这是用CSS3制作的旋转的六面体 请用火狐或谷歌浏览器预览,有些旋转角度做的不够好,请大神指教 top bottom left right front back
- JavaScript事件委托的技术原理
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
- Sqli-labs less 26
Less-26 TIPS:本关可能有的朋友在windows下无法使用一些特殊的字符代替空格,此处是因为apache的解析的问题,这里请更换到linux平台下. 本关结合25关,将空格,or,and,/ ...
- 通过登入IP记录Linux所有用户登录所操作的日志
通过登入IP记录Linux所有用户登录所操作的日志 对于Linux用户操作记录一般通过命令history来查看历史记录,但是如果在由于误操作而删除了重要的数据的情况下,history命令就不会有什么作 ...