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 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...
随机推荐
- scala伴生对象，apply()及单例
1:伴生对象与apply方法 如果一个class与一个object具有相同的名字,那么我们就认为它们互为伴生.object为class的伴生对象.如下图所示,object Apply为class Ap ...
- jQuery设计思想
jQuery设计思想 原文网址:http://jqfundamentals.com/book/ 阮一峰 翻译整理 [目录] 一.选择网页元素 二.改变结果集 三.链式操作 四.元素的操作:取值和赋值 ...
- memcached使用说明
1.在服务器上注册服务 2.启动服务:services.msc 3.客户端创建服务接口 object Get(string key); List<string> GetKeys ...
- 如何混合使用ARC和非ARC
如果你的项目使用的非ARC模式,则为ARC模式的代码文件加入-fobjc-arc标签.如果你的项目使用的ARC模式,则为非ARC模式的代码文件加入 -fno-objc-arc标签.添加标签的方法: 1 ...
- 国内外php主流开源cms、SNS、DIGG、RSS、Wiki汇总
今年国内PHP开源CMS内容管理系统从程序框架,模版加载到程序功能上都有很大的进步,大部分都采用了自定义模块,自定义模型的方式,同时提供各个CMS都提供不同的特色功能,CMS内容管理系统一直影响着互联 ...
- 亚马逊 在线测试题目 amazon
分析:其实就是求矩形中某一个点到其他点的距离加权最小 方法一: 对每一个点求其到其他点的加权距离,然后比较最小.由于有M*N个点,对每一个点求加权距离是O(M*N)的,所以整体时间复杂度是O(M*M* ...
- JavaScript之Cookie讲解
什么是 Cookie “cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie ...
- Request/Server的相关topic
Request---------Server模式 HTTP 协议--------->这个可能返回json, 也可能是HTML HTML页面处理的流程以及资源文件的加载 浏览器最大连接数 js资源 ...
- Unity3D战争迷雾效果
原地址:http://liweizhaolili.blog.163.com/blog/static/16230744201431835652233/ 最近一直都在做Flash相关的东西,很久没有空搞U ...
- uva 10564
Problem FPaths through the HourglassInput: Standard Input Output: Standard Output Time Limit: 2 Seco ...