介绍
地理位置（Geolocation）是HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用，使得开发人员不用借助其他软件就能轻松实现位置查找，地图应用，导航等功能，具有划时代的意义！
浏览器支持情况
image.png
定位基本原理
- GPS定位
GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离，然后综合多颗卫星的数据就可知道接收机的具体位置。适用于具备GPS功能的设备。
优点：在空旷地区比较准确，覆盖面比较广
缺点：需要比较长时间定位，比较耗电池，在室内不太好，需要GPS设备支持。 - WIFI/基站定位
地理定位服务提供者会在全世界范围内去收集WIFI热点的位置信息，然后用户的设备只要能支持WIFI就能获取到周围WIFI热点的位置和信号强弱信息，然后把这些信息发给服务提供者就能得到自己的位置。
优点：比较准确，适用于室内环境，响应速度快
缺点：在wifi热点少的地方不适用 - IP定位
原理很简单，就是通过你设备的物理地址所备案的地址信息来定位，但这种方式精确度不高，特别是用代理来上网的情况下。一般作为GPS和WIFI都不支持的情况下大致模糊匹配，比如各大团购网站检测用户所在城市。
地理位置获取流程
- 用户打开需要获取地理位置的web应用。
- 应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。
- 假设用户允许或浏览器默认允许，浏览器从设备查询相关信息。
- 浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。
核心代码实现
- geolocation对象以及getCurrentLocation()方法
在支持HTML5的浏览器中，为JavaScript中window对象的navigator对象增加了一个对象属性即geolocation对象。该对象提供了实现地理位置定位的接口，其实就是将用户当前位置发送给一些位置服务提供商的服务器，从而获取位置信息。要使用该功能就首先要判断浏览器是否支持该对象，即访问window.navigator.geolocation如果不是undefined则表示浏览器支持定位，也可以省略window。
getCurrentPosition(success,error,options)方法用来获取当前用户的位置信息，该方法就会让浏览器去从一些位置服务提供商哪里获取当前的位置。success是获取成功后的回调函数，error是获取失败的回调函数，options是一个对象表示为该方法传递的一些设置参数。 - success回调函数
//获取经纬度：
function success(position){
/*position就是定位成功后包含位置信息的对象*/
var latitude=position.coords.latitude; //纬度
var longgitude=position.coords.longitude; //经度
alert("纬度："+latitude+"\n经度："+longgitude);
}
function error(){
alert("获取失败");
}
var options={};
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(success,error,options);
}else{
alert("浏览器不支持定位");
}
- error回调函数
function error(errorObj){
switch(errorObj.code){
case 1 : alert(errorObj.message); break; //用户选了不允许
case 2: alert(errorObj.message); break; //连不上GPS卫星，或者网络断了
case 3: alert(errorObj.message); break;//超时
default: alert(errorObj.message); break; //未知错误，其实是err.code==0的时候
}
}
- options选项
- enableHighAccuracy表示是否允许使用高精度,值为true 的时候，浏览器会尝试启用gps或WiFi定位，默认指为 true
- timeout指定超时时间
- maximumAge设置缓存时间，即在该时间范围内不重新获取位置
网友评论