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帮助类, ...
随机推荐
- Ninject之旅之六：Ninject约定
摘要 在小的应用系统中一个一个注册一些服务类型不怎么困难.但是,如果是一个实际的有上百个服务的应用程序呢?约定配置允许我们使用约定绑定一组服务,而不用一个一个分别绑定. 要使用约定配置,需要添加Nin ...
- 面试iOS遇到这种笔试《操作评估》
一.开发团队需求: 开发一款软件需要前端后台和推广的人.1,首先要明确设计这个APP的理念2,合理的列出APP的需求3,找到后台人员让他们搭好后台数据4,前端的人负责展示到界面上5,推广人员负责让更多 ...
- android常用调试工具fiddle、wireshark和android studio的配置
Fiddle配置android代理 在wifi的同一个局域网环境的windows主机中安装fiddler,并且启动,如本次192.168.3.14 在android手机端配置代理为该主机 还有一种方式 ...
- VUE 入门基础(9)
十一,深入响应式原理 声明响应式属性 由于Vue不允许动态添加根级响应式属性,所以你必须在初始化实例钱声明根级响应式属性,哪怕只有一个空值. var vm = new Vue({ data:{ // ...
- 微信支付之JSAPI开发-第二篇：业务流程详解与方案设计
微信支付流程 流程: 上图的网址为:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4 如上图所示,微信网页支付的具体流程大致分为 ...
- ajaxfileupload.js的简单使用
上传文件 未选择任何文件 引入 <script src="../javaScript/ajaxfileupload.js"></script> <bu ...
- java命名规范有感
一. 注()里的内容是自己的吐槽 二. 命名规约 不能以下划线或美元符开始和结尾.反例:_name,$name,name_,name$.(我就从来没这样用过) 不能使用拼音和英文组合方式命名.更不能以 ...
- 关于checkbox复选框
1.复选框后面为什么会有间距,如图 首先这肯定不是空格.实际上是这样的,在Firefox,chrome,Safari等现代浏览器下复选框与文字的间隔确实是由margin引起的,也就是默认情况下,che ...
- mongodb遇到的错误
1. [root@localhost bin]# ./mongod -dbpath /data/db --logpath /usr/local/mongodb/log --13T18:: F CONT ...
- b/s结构的物业管理系统（一）-------登录篇
最近计划做一个非框架的物业管理系统前端使用bootstrap js jquery 等希望各位指点一下共同学习 ---前端登录页面------ 这个页面的输入框组用的bootstrap的,我设置了几张背 ...