H5学习系列之Geolocation API
获取位置信息途径：
1、IP地址地理定位数据
2、GPS地理定位数据
3、WI-FI地理定位数据
4、手机地理定位数据
无废话直接上重点：navigator.geolocation对象就是获取地理位置信息的关键（目前由于中国大陆防火墙问题，谷歌浏览器无法提供位置服务）
浏览器获取用户位置信息（属于隐私信息），必须首先通过用户同意。
检测浏览器是否支持H5的方法 if(navigator.geolocation){}else {}
单次请求： navigator.geolocation.getCurrentPosition(successCallBack,errorCallback,option)
funciton successCallBack(data){
data.coords.latitude 维度；
data.coords.longitude 经度
data.coords.accuracy 准确度
data.coords.altitude 海拔（m）
data.coords.altitudeAccuracy 海拔准确度(m)
data.coords.headig 行进方向 相对于正北而言
data.coords.speed 地面速度 m/s
以上参数 如果设备不支持返回null
}
function errorCallback(error) {
switch (error.code) {
case 0:
updateErrorStatus("There was an error while retrieving your location.Additional details:" + error.message);
break;
case 1:
updateErrorStatus("The user opted not to share his or her location details:" + error.message);
break;
case 2:
updateErrorStatus("the browser was uable to determine your location. Additional details:" + error.message);
break;
case 3:
updateErrorStatus("The browser timed out before retrieving the location");
break;
}
第三个参数需要掺入json对象{timeout:10000//计算当前位置所允许的最大时间,maxinumAge:100000,//浏览器重新计算位置的时间间隔}
重复请求位置
navigator.geolocation.watchaPositino(updateFunciton,errorFunction);//updateFunction只要用户位置发生变化就出发；
此方法会返回一个id，如果要终止此方法就navigator.geolocation.clearwatch(id)
一下代码附上一个小案例：计算用户移动的距离
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Geolocation</title>
</head>
<body onload="loadDemo()">
<header>
<h1>Odometer Demo</h1>
<h4>Live Race Deta!</h4>
</header>
<div id="container" >
<section>
<article>
<header>
<h1>你的位置</h1>
</header>
<p id="status" class="info">你的浏览器没有允许获取位置</p>
<div class="geostatus">
<p id="latitude">Latitude(维度):</p>
<p id="longitude">longitude(精度):</p>
<p id="accuracy">accuracy(精确度):</p>
<p id="timestamp">timestamp(时间戳):</p>
</div>
</article>
</section>
</div>
<footer>
<h2>Powered by html5,and your feet!</h2>
</footer>
</body>
</html>
<script src="Scripts/jquery-2.2.1.js"></script>
<script type="text/javascript">
var totalDistance = 0.0;
var lastLat;
var lastLong;
Number.prototype.toRadians = function () {
return this * Math.PI / 180;
}
function Distance(latitude1, longitude1, latitude2, longitude2) {
var R = 6371;
var deltalatitude = (latitude2 - latitude1).toRadians();
var detalongtude = (longitude2 - longitude1).toRadians();
latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();
var a = Math.sin(deltalatitude / 2) *
Math.sin(detalongtude / 2) +
Math.cos(latitude1) *
Math.cos(latitude2) *
Math.sin(deltalatitude / 2) *
Math.sin(deltalatitude / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
}
function updateErrorStatus(message) {
document.getElementById("status").style.background = "papayaWhip";
document.getElementById("status").innerHTML = "<strong>Error</strong>:" + message;
}
function updateStatus(message) {
document.getElementById("status").style.background = "paleGreen";
document.getElementById("status").innerHTML = message;
}
function loadDemo() {
if (navigator.geolocation) {
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your brower";
navigator.geolocation.watchPosition(updateLocation, handlerLocationError);
}
}
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
$("#latitude").html("Latitude:" + latitude);
$("#longitude").html("longitude:" + longitude);
$("#accuracy").html("accuracy:" + accuracy);
$("#timestamp").html("timestamp:" + timestamp);
if (accuracy>=30000) {
updateStatus("Need More accurate values to calculate distance.");
return;
}
if ((lastLat!=null)&&(lastLong!=null)) {
var currentDistance = Distance(latitude, longitude, lastLat, lastLong);
$("#currDist").html("Current distance traveled:" + currentDistance.toFixed(2) + "km");
totalDistance += currentDistance;
$("#totalDist").html("Total distance traveled:" + totalDistance.toFixed(2) + "km");
updateErrorStatus("LocaTION SUCCESSFULLY UPDATED.");
lastLat = latitude;
lastLong = longitude;
}
}
function handlerLocationError(error) {
switch (error.code) {
case 0:
updateErrorStatus("There was an error while retrieving your location.Additional details:" + error.message);
break;
case 1:
updateErrorStatus("The user opted not to share his or her location details:" + error.message);
break;
case 2:
updateErrorStatus("the browser was uable to determine your location. Additional details:" + error.message);
break;
case 3:
updateErrorStatus("The browser timed out before retrieving the location");
break;
}
}
navigator.geolocation.getCurrentPosition()
</script>
H5学习系列之Geolocation API的更多相关文章
- H5学习系列之Communication API
1 .postMessage API 首先介绍一下什么是iframe? 百度百科里这样写道:IFRAME,HTML标签,作用是文档中的文档,或者浮动的框架(FRAME). 我的理解就是网页中的网页. ...
- H5学习系列之文件读取API--本文转自http://blog.csdn.net/jackfrued/article/details/8967667
HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
- H5学习系列之Audio和Video
1.视频文件:音频轨道.视频轨道和一些元数据(视频封面.标题.子标题.字幕等相关信息). 2.目前H5还不支持的:流式音频和视频(H5对视频的支持只限于加载的全部媒体文件).H5的媒体收到跨域资源共享 ...
- Redis总结（五）缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结（一）AutoResetEvent的使用介绍（用AutoResetEvent实现同步） C#总结（二）事件Event 介绍总结 C#总结（三）DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列（六）: RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- Html5 学习系列（四）文件操作API
原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是c ...
- 大数据学习系列之三 ----- HBase Java Api 图文详解
版权声明: 作者:虚无境 博客园出处:http://www.cnblogs.com/xuwujing CSDN出处:http://blog.csdn.net/qazwsxpcm 个人博客出处:http ...
- EF（Entity Framework）系统学习系列
好久没写博客了,继续开启霸屏模式,好了,废话不多说,这次准备重新系统学一下EF,一个偶然的机会找到了一个学习EF的网站(http://www.entityframeworktutorial.net/) ...
- MVC学习系列4--@helper辅助方法和用户自定义HTML方法
在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...
随机推荐
- 魅族Java面经
1. 面试官问题怎么获取Memcached里面的session,我答request.getSession().这是通过cookie里面的sessionID获取session的,Memcached里面也 ...
- 面试中遇到的iOS笔试题
1.浅复制和深复制的区别? 2.类别的作用(category)?继承和类别在实现有何区别? 3.类别(category)和类扩展(extension)的区别. 4.obc中的协议和java中的接口概念 ...
- php工作笔记4-mysql笔记1
1.Mysql中数值的长度和最大值是没有关系的,它仅仅只代表了数据的宽度,比如:int(4)和int(8)可以存储的数据长度是一样的,她两的大小都是4Byte, 在存储上数据的时候比如Int(4) | ...
- Apache 配置 WebSocket 协议
本文使用 http proxy 方式 实现 apache 支持 WebSocket 请求(JK 使用的 ajp 协议不能支持websocket) 通过 apache 访问 后端 tomcat上的 w ...
- Nginx使用Expires增加浏览器缓存加速
Max-age是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间). Expires它比max-age要麻烦点,Expires指定的时间分&q ...
- STP的作用和操作
STP的作用 STP通过阻塞端口来消除环路,并能够实现链路备份的目的 STP的操作 选举一个根桥 比较交换机的桥ID,越小越优先 桥ID 是8个字节,2个字节的优先级+6个字节的MAC地址 2.每个 ...
- Sql Server中不常用的表运算符之UNPIVOT
在Sql Server中不常用的表运算符之PIVOT中,介绍了PIVOT表运算符,现在来说说与之相对应的另一个表运算符UNPIVOT. 从名字可以看出,这个运算符的作用与PIVOT刚好相反,是将一行的 ...
- Sublime Text 3 汉化小技巧
Sublime Text 3 简体中文汉化包使用方法 1.将下载的sublime_text3汉化包文件解压,得到的Default.sublime-package 文件.打开sublime text 3 ...
- python爬虫：一些常用的爬虫技巧
python爬虫:一些常用的爬虫技巧 1.基本抓取网页 get方法: post方法: 2.使用代理IP 在开发爬虫过程中经常会遇到IP被封掉的情况,这时就需要用到代理IP; 在urllib2包中有Pr ...
- 3.struts2接收页面传参的三种方式
Struts2通过拦截器机制封装了三种接收页面参数的方式: 1.属性驱动 2.模型驱动(有两种) Domain ModelDriven 1.属性驱动:这种方式比较简单,只要你直接在页面定义变量并且符合 ...