html5 Geolocation(地理位置定位)学习
1、html5 Geolocation
html5 Geolocation API 使用很简单，请求一个位置信息，如果用户同意，浏览器会返回一个位置信息，该位置是通过用户的底层设备（手机，电脑）
提供给浏览器。位置信息一般包括经度和纬度信息！
经度和纬度坐标信息一般由两种方式表示
a、十进制表示:39.17222
b、DMS角度格式表示：39°10'20"
2、位置从哪里来
html5 Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户，相反，它只是用于检索位置信息的API，而且通过该API检索到的数据只具有某种程度的准确性！它并不能保证设备返回的数据就是精确的。
设备可以使用的数据源如下所示：
IP地址
三维坐标
1、GPS（全球定位系统）
2、从RFID、Wi-FI和蓝牙到Wi-FI的MAC地址
3、GSM或CDMA手机的ID
用户自定义数据
2.1 IP地址地理定位数据
过去，基于IP的地址的地理定位方法是获得位置信息的唯一方式。但其返回的数据通常是不靠谱的，基于IP的地理位置定位方式是：自动查找用户的IP地址然后检索其注册的物理地址，因此如果用户的ip地址是ISP提供的，其位置往往由服务器供应商的物理地址决定！因此这个地址和用户实际的地址可能相差很大。
2.2 GPS地理定位数据
GPS是通过搜集运行在地球周围的多个GPS卫星信号实现的，但是，它的定位时间可能较长，不太适合快速响应的应用程序。而且在室内效果不是很好。
2.3 WI-FI地理定位数据
基于WIFI的地理定位数据是通过三角距离计算得到的，这个三角距离是指用户当前位置已知的多个wifi接入点的距离。不同于GPS,wifi在室内也非常准确。
2.4 手机地理定位数据
基于手机的地理定位数据是通过用户到一些基站的三角距离确定。这种方法可提供相当准确的位置结果。这种方法通常和基于WIFI基于GPS地位结合使用。
2.5 用户自定义数据
用户自己输入的一些地理位置信息
3、处理位置信息
由于位置信息数据属于敏感信息，所以在接到之后必须小心处理，存储和重传。如果用户没有授权存储这些信息，那么应用程序在相应任务完成后立即删除它。
如果需要最位置信息重传，建议先对其进行加密。
4、浏览器支持性检测
function loaddemo(){
if(navigator.geolocation){
alert('浏览器支持html5 geolocation');
}else{
alert('浏览器不支持html5 geolocation');
}
}
loaddemo();
5、位置请求
位置请求有两种
1、单次定位请求
2、重复性位置更新请求
5.1 单次定位请求
我们看下这个核心函数的调用
void getCurrentPosition(in PositionCallback successCallback,in optional PositionErrorCallback errorCallback,in optional PositionOptions options);
这个方法是通过navigator.geolocation调用的。所以在脚本中需要先取得此对象。
这个方法接收一个必选参数和两个可选的参数
successCallback 必选参数，位置信息请求成功后处理的地方
errorCallback 可选参数，位置信息请求错误后处理的函数
options 可选参数，这个对象可以调整数据搜集的方式
var nvaga = navigator.geolocation;
nvaga.getCurrentPosition(updatPos,errorLoca);
function updatPos(position){
var latitude = position.coords.latitude;//十进制单位
var longitude = position.coords.longitude;//十进制单位
var accuracy = position.coords.accuracy;//以m为单位制定纬度和经度与实际位置的差距
var timestamp = position.timestamp;
console.log('经度坐标' + latitude);
console.log('纬度坐标' + longitude);
console.log('准确度' + accuracy);
console.log('获取位置数据的时间' + timestamp);//时间戳
}
function errorLoca(error){
switch(error.code){
case 0:
console.log('位置信息获取失败，失败原因'+error.message);
break;
case 1://错误编码 PERMISSION_DENIED
console.log('用户拒绝共享其位置信息');
break;
case 2://错误编码 POSITION_UNAVAILABLE
console.log('尝试获取用户位置数据，但失败了');
break;
case 3://错误编码 TIMEOUT
console.log('尝试获取用户的位置数据超时');
break;
}
}
5.2 可选的地理定位请求特性
geolocation 三个可选的参数（enableHighAccuracy,timeout和maximumAge）,将这三个参数传递给html5 geolocation服务以调整数据收集的
方式，这三个参数可以使用json对象传递。
enableHighAccuracy：通知浏览器启用高精度模式，参数的默认值为false,如果启用该参数，可能会没有任何差别，也可能会导致机器花费更多的时间和资源来确定位置，应谨慎使用。
timeout:告诉浏览器获取当前位置信息所允许的最长时间。如果这个时间段未完成，就会调用错误处理函数。默认值为无穷大
maximumAge：这个值表示浏览器重新计算位置的时间间隔，以ms为单位，此值默认为0。
使用可选的参数的调用方式
nvaga.getCurrentPosition(updatPos,errorLoca,{timeout:10000});
告诉浏览器任何处理时间超过10s将会触发错误事件。
5.3 重复性位置请求
navigator.geolocation.watchPosition(updatPos,errorLoca);
通过这么简单的修改后，只要用户位置发生变化，geolocation服务器就会调用updatPos函数。
如果不想使用更新的话可是通过下面的代码清除实时更新
navigator.geolocation.clearWatch(watchID);
这个函数会通知geolocation服务器，程序不想要接收用户的位置信息更新了！
watchID的使用和获取
var watchId = navigator.geolocation.WatchPosition(updatPos,errorLoca);
//清除位置更新
navigator.geolocation.clearWatch(watchId);
6、实例 距离跟踪器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geolocation</title>
</head>
<body onload="loadAct()">
<div class="">
<p id="lat"></p>
<p id="lonat"></p>
<p id="accur"></p>
<p id="times"></p>
<p id="currdis"></p>
<p id="totalDis"></p>
</div>
<p id="status" style="color:#f00"></p>
</body>
<script>
//实例 距离跟踪器
//通过用户的移动产生的位置更新，计算两个坐标之间的距离，来确定在这短时间内用户行走了多少距离,这里我们使用Haversine公式来计算
//js实现Haversine公式
Number.prototype.toRadians = function(){
return this*Math.PI/180;
}
// 计算两个经度和纬度之间的距离
function distances(latitude1,longitude1,latitude2,longitude2){
var r = 6371;//定义地球的半径
var deltaLatitude = (latitude2 - latitude1).toRadians();
var deltaLongitude = (longitude2 - longitude1).toRadians();
latitude1 = latitude1.toRadians();
latitude2 = latitude2.toRadians();
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;
}
var toldis = 0.0;
var lastlat;
var lastlong;
function updateError(message){
var status = document.querySelector('#status');
status.innerHTML = message;
}
function updateStatus(message){
var status = document.querySelector('#status');
status.style.color = '#0f0';
status.innerHTML = message;
}
function loadAct(){
if(navigator.geolocation){
document.querySelector('#status').innerHTML = '您的浏览器支持html5 地理定位';
navigator.geolocation.watchPosition(updateLocation,errorLoca,{timeout:20000});
}
}
function updateLocation(position){
var latitude = position.coords.latitude;//十进制单位
var longitude = position.coords.longitude;//十进制单位
var accuracy = position.coords.accuracy;//以m为单位制定纬度和经度与实际位置的差距
var timestamp = position.timestamp;
document.querySelector('#lat').innerHTML = '您当前的经度位置'+latitude;
document.querySelector('#lonat').innerHTML = '您当前的纬度度位置'+latitude;
document.querySelector('#accur').innerHTML = '准确度'+accuracy;
document.querySelector('#times').innerHTML = '获取位置时间'+timestamp;
//合理性检测
if(accuracy >= 30000){
updateStatus('需要更准确的信息来计算距离');
return;
}
if(latitude != null && longitude != null){
var curdis = distances(latitude,longitude,lastlat,lastlong);
document.querySelector('#currdis').innerHTML = '当前的行走的距离' + curdis;
toldis += curdis;
document.querySelector('#totalDis').innerHTML = '您当前行走的总距离为' + toldis +'km';
}
lastlat = latitude;
lastlong = longitude;
}
function errorLoca(error){
switch(error.code){
case 0:
updateError('位置信息获取失败，失败原因'+error.message);
break;
case 1://错误编码 PERMISSION_DENIED
updateError('用户拒绝共享其位置信息');
break;
case 2://错误编码 POSITION_UNAVAILABLE
updateError('尝试获取用户位置数据，但失败了');
break;
case 3://错误编码 TIMEOUT
updateError('尝试获取用户的位置数据超时');
break;
}
}
/* */
</script>
</html>
html5 Geolocationk获取的值也可以传递给谷歌或者百度的地图API，来使用谷歌，百度他们自己的API，从而实现更复杂的应用！
html5 Geolocation(地理位置定位)学习的更多相关文章
- HTML5 Geolocation(地理位置)
HTML5 Geolocation(地理位置).是用来定位用户的位置的. HTML5 Geolocation API 用于获得用户的地理位置,鉴于该特性可能侵犯用户的隐私权,除非用户同意,否则不能获取 ...
- html5的地理位置定位
html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站 核心对象Geolocation是wi ...
- HTML5获取地理位置定位信息
如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
- HTML5 Geolocation位置信息定位总结
现在定位功能很常用,所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据.HTML5 Geolocation的定位用法很简单,首先请求位置信息,用户同意,则返回位置信息.HTML5 Geoloc ...
- HTML5 地理位置定位（HTML5 Geolocation）原理及应用
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- [Javascript] HTML5 地理位置定位（HTML5 Geolocation）原理及应用
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
- HTML5 Geolocation学习
GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...
- HTML5 Geolocation 构建基于地理位置的 Web 应用
HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...
- 使用HTML5地理位置定位到城市的方法及注意事项
介绍 本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路 利用HTML5 提供的API获取到用户的 ...
随机推荐
- [INS-20802] Oracle Database Configuration Assistant 失败
1.错误原因 [INS-20802] Oracle Database Configuration Assistant 失败 2.错误原因 3.解决方案 版权声明:本文博主原创文章.博客,未经同意 ...
- OCP-1Z0-051-标题决心-文章2称号
2. View the Exhibit to examine the description for the SALES table. Which views can have all DML ope ...
- linux sdio card睡眠治疗 sdio card removed解决方案
近期调试几款sdio card suspend时都会出现sdio card removed,之后 要么死机要么模块不能正常工作.根本原因也就是休眠没有处理好.昨天最终找到了 解决方法. 1:host端 ...
- 《神秘的程序员们》漫画26~28：《万年坑系列》 I、II、III（转）
26 <万年坑系列> I:那些令你憎恶的系统从何而来? 世界上总有一些令人憎恶的系统,而你却天天非用不可.这些系统的提供方们既不缺钱也不缺人,有的还很热衷于改版升级. 但为何升级完后,它们 ...
- HTML5使用和实战分析HTML5 WebSocket API
通过引入一个简单的界面(请参见下面的列表),开发替代技术,由于长轮询和"永远框架,从而进一步减少延迟. 后台代码 [Constructor(in DOMString url, optiona ...
- Java日期的格式String类型GMT,GST换算成日期Date种类
请尊重他人的劳动成果.转载请注明出处:Java日期格式化之将String类型的GMT,GST日期转换成Date类型 http://blog.csdn.net/fengyuzhengfan/articl ...
- 汉字转整数，比系统简单易用！a2iLxx （覆盖物 16十六进制，VC6亲测可用）请提供意见~
#include "string.h" #define INVALID_VALUE_LXX ((1 << (8 * sizeof(int) -1)) - 1) /*有符 ...
- crm操作安全角色
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using System.Co ...
- IOS SDK相机的详细解释/画廊（默认＋他们的高清摄像头接口）
原版的blog,转载请注明出处 blog.csdn.net/hello_hwc 前言: 新NSURLSession的UploadTask的,结果写那个Demo的时候想要写成拍照上传.然后就想到先写一个 ...
- 【地图API】为何您的坐标不准？如何纠偏？
原文:[地图API]为何您的坐标不准?如何纠偏? 摘要:各种坐标体系之间如何转换?到底有哪些坐标体系?什么是火星坐标?为什么我的坐标,在地图上显示会有偏移?本文详细解答以上问题.最后给出坐标拾取工具. ...