HTML5定位使用心得

时间:2023-03-09 05:48:02
HTML5定位使用心得

最近项目中接到一个需求,需要使用百度地图API和HTML5定位特性。

对于百度地图API,没啥好说的,刨它的API就是了。

今天想说说JS定位特性。

浏览器支持

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

访问地理位置

地理位置可以在JavaScript中通过浏览器的navigator.geolocation对象访问。

这个对象提供了3个方法:getCurrentPositionwatchPositionclearWatch

getCurrentPosition(success_callback, error_callback, geolocationOptions)

success_callback,获取定位信息成功时的回调函数

error_callback,获取定位信息失败时的回调函数

geolocationOptions,定位设置,它是一个对象,包含3个属性:

enableHighAccuracy(Boolean型,默认为false,是否尝试更精确地读取纬度和经度,移动设备上,这可能要使用手机上的GPS,这会消耗移动设备更多的电量,定位所需时间也会更长)

timeout(单位为毫秒,默认值为0,在放弃并触发处理程序之前,可以等待的时间----用户选择期间是不计时的)

maximumAge(单位为毫秒,默认值为0。用来告诉浏览器是否使用最近缓存的位置数据,如果在maximumAge内有一个请求,将会返回它,而不请求新位置。maximumAge如果为Infinity,则总是使用一个缓存的位置,如果为0则必须在每次请求时查找一个新位置)

获取定位信息成功时getCurrentPosition()返回一个positon对象给success_callback。此对象包含如下属性:

coords.latitude(十进制数的纬度)

coords.longitude(十进制数的经度)

coords.accuracy(位置精度)

coords.altitude(海拔,海平面以上以米计)

coords.altitudeAccuracy(位置的海拔精度)

coords.heading(方向,从正北开始以度计)

coords.speed(速度,以米/每秒计)

timestamp(响应的日期/时间)

获取定位信息失败时getCurrentPosition()返回一个error对象给error_callback。此对象包含如下属性:

code(错误编码:“1”为用户禁止了定位信息获取,“2”为网络不可用或连接卫星失败,“3”为获取定位所花费的时间过长,“0”为出现未知错误)

message(错误信息)

var x = document.getElementById("demo");
var options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 60000
}; function getLocation(){
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition, showError, options);
  }else{
    x.innerHTML="Geolocation is not supported by this browser.";
  }
} function showPosition(position){
  x.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
} function showError(error){
switch(error.code){
case 1:
x.innerHTML = "User denied the request for Geolocation.";
break;
case 2:
x.innerHTML = "Location information is unavailable.";
break;
case 3:
x.innerHTML = "The request to get user location timed out.";
break;
case 0:
x.innerHTML = "An unknown error occurred.";
break;
  }
}

watchPosition像一个追踪器,返回的位置信息会随着用户移动而改变,与clearWatch成对。

watchPosition与clearWatch有点像setInterval和clearInterval的工作方式。

var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, geolocationOptions);
navigator.geolocation.clearWatch(watchPositionId);

定位功能的主要影响因素

定位功能的使用非常简单,一个对象三个方法。但在工作过程中,发现经常获取不到定位信息。经查找资料得知影响定位功能的主要因素是网络。

定位功能在移动网络环境里,是通过基站定位或者WIFI定位,获取定位信息成功率高,速度快。

若是在物理网络环境里,则有点复杂,首先,浏览器调用其对应的定位服务器的定位接口,然后定位服务器连接卫星,以用户的IP地址进行定位,再将定位信息返回浏览器传给用户。由于涉及浏览器与定位服务器连接是否成功、定位服务器与卫星连接是否成功两方面因素的影响,固定位成功率很难保证。

GPS定位由于信号比较薄弱的关系定位成功率比较低,就算成功定位,需要花费的时间也很长,一般使用GPS定位的同时都会使用基站和WIFI辅助定位。

定位精准度

关于定位精准度问题,由于绝大多数情况下,设备的定位信息是通过WIFI定位方式返回,误差一般在几十米之内。

(因为GPS定位耗时过长一般会被略过,基站定位精准度较低,优先级不如WIFI定位)

而getCurrentPosition的配置参数里的enableHighAccuracy设置为true,仅仅是启用GPS定位,根据GPS定位的特性,应用中使用的机会不多。所以一般都用默认flase就足够了。

关于实际应用的温馨提示

这里,需要和大家分享一下实际工作中遇到的一种情况,那就是百度地图API和html5原生的定位API搭配使用,会导致极大的精准误差的问题。

出现这个问题的原因在于,国内的地图产品,其地理位置大多数都进行了GCJ-02加密,即加入随机的偏差。

而html5原生的定位API获取到的地理位置,是未经加密的。

因此,为了保证html5原生的定位API获取到的地理位置在百度地图上较为准确的解析,就需要用官方提供的转换类。

由于国内地图产品的地理位置普遍进行了GCJ-02加密(身在天朝,没办法,我知道得太多了...)

因此,在用一种地图产品的API时,都应养成一个习惯,就是看看它们有没有提供地理位置信息转换的类

下面是在百度地图API中的转换实例。

先在项目中引入类<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

BMap.Convertor.translate(gpsPoint, 2, callback);
//GPS坐标转成百度坐标
BMap.Convertor.translate(bdPoint, 0, callback);
//百度坐标转成GPS坐标
var callback = function(point){
  //参数point为转换后的point对象,GPS坐标生成的point对象转换成百度坐标point对象,在百度地图里才能解析成更准确的地址
  //通过它的lng、lat属性分别获取经、纬度信息
}