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