HTML5地理位置定位 lbs

地理位置定位（Geolocation）

一、介绍

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

 

二、浏览器支持情况

 

三、定位基本原理

   

1．GPS定位

GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离，然后综合多颗卫星的数据就可知道接收机的具体位置。适用于具备GPS功能的设备。

优点：在空旷地区比较准确，覆盖面比较广

缺点：需要比较长时间定位，比较耗电池，在室内不太好，需要GPS设备支持。

 

2．WIFI定位

    地理定位服务提供者会在全世界范围内去收集WIFI热点的位置信息，然后用户的设备只要能支持WIFI就能获取到周围WIFI热点的位置和信号强弱信息，然后把这些信息发给服务提供者就能得到自己的位置。

优点：比较准确，适用于室内环境，响应速度快

缺点：在wifi热点少的地方不适用

 

3．IP定位

原理很简单，就是通过你设备的物理地址所备案的地址信息来定位，但这种方式精确度不高，特别是用代理来上网的情况下。一般作为GPS和WIFI都不支持的情况下大致模糊匹配，比如各大团购网站检测用户所在城市。

 

4．手机基站定位（GSM/CDMA）

和WIFI原理类似，Apple的设备就是把WIFI和基站信息结合起来进行定位。

 

 

四、地理位置获取流程

1、用户打开需要获取地理位置的web应用。

2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。

3、假设用户允许或浏览器默认允许，浏览器从设备查询相关信息。

4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

 

五、核心实现

实现基于浏览器（无需后端支持）获取用户的地理位置技术，可以精确定位用户的地理位置(精度最高达10m之内，依赖设备)，并且可以持续追踪用户的地理位置，还可以与GoogleMap、BaiduMap交互实现地理位置信息的可视化呈现。

 

   1．geolocation对象以及getCurrentLocation()方法

在支持HTML5的浏览器中，为JavaScript中window对象的navigator对象增加了一个对象属性即geolocation对象。该对象提供了实现地理位置定位的接口，其实就是将用户当前位置发送给一些位置服务提供商的服务器，从而获取位置信息。要使用该功能就首先要判断浏览器是否支持该对象，即访问window.navigator.geolocation如果不是undefined则表示浏览器支持定位，也可以省略window。

例如：

alert(navigator.geolocation);   //结果为[object Geolocation]，就表示该浏览器支持HTML5的定位

 

geolocation对象提供了getCurrentPosition(success,error,options)方法用来获取当前用户的位置信息，该方法就会让浏览器去从一些位置服务提供商哪里获取当前的位置。success是获取成功后的回调函数，error是获取失败的回调函数，options是一个对象表示为该方法传递的一些设置参数，例如延时获取等。其中获取成功后会将一个参数传递给回调函数，通过该函数就可以得到定位的一些信息了，例如经纬度等。

 

2．success回调函数

例如获取当前的经纬度：

function success(position){       /*position就是定位成功后包含位置信息的对象*/       var latitude=position.coords.latitude