介绍

地理位置（Geolocation）是HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用，使得开发人员不用借助其他软件就能轻松实现位置查找，地图应用，导航等功能，具有划时代的意义！

浏览器支持情况

image.png

定位基本原理

1. GPS定位
   GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离，然后综合多颗卫星的数据就可知道接收机的具体位置。适用于具备GPS功能的设备。
   优点：在空旷地区比较准确，覆盖面比较广
   缺点：需要比较长时间定位，比较耗电池，在室内不太好，需要GPS设备支持。
2. WIFI/基站定位
   地理定位服务提供者会在全世界范围内去收集WIFI热点的位置信息，然后用户的设备只要能支持WIFI就能获取到周围WIFI热点的位置和信号强弱信息，然后把这些信息发给服务提供者就能得到自己的位置。
   优点：比较准确，适用于室内环境，响应速度快
   缺点：在wifi热点少的地方不适用
3. IP定位
   原理很简单，就是通过你设备的物理地址所备案的地址信息来定位，但这种方式精确度不高，特别是用代理来上网的情况下。一般作为GPS和WIFI都不支持的情况下大致模糊匹配，比如各大团购网站检测用户所在城市。

地理位置获取流程

1. 用户打开需要获取地理位置的web应用。
2. 应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。
3. 假设用户允许或浏览器默认允许，浏览器从设备查询相关信息。
4. 浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

核心代码实现

• 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设置缓存时间，即在该时间范围内不重新获取位置

原文链接