正文
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，从而实现更复杂的应用！
