基于浏览器的HTML5地理定位

基于浏览器的HTML5地理定位

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo，过程就是获取浏览器经纬度，并用腾讯地图（大家可以选择自己喜欢的地图）显示出来，实现的最终效果如下图所示：

一、检测浏览器是否支持：

if (navigator.geolocation) {

//console.log("浏览器支持!");

}

else {

// console.log("浏览器不支持!");

}

二、navigator.geolocation用于获取基于浏览器的当前用户地理位置，提供了3个方法:

void getCurrentPosition(onSuccess,onError,options);

//获取用户当前位置

int watchCurrentPosition(onSuccess,onError,options);

//持续获取当前用户位置

void clearWatch(watchId);

//watchId 为watchCurrentPosition返回的值

//取消监控

参数详细说明见下表：

参数	功能	返回参数	是否必选
onSuccess	方法成功时候的回调，返回position对象，通过这个对象可以获取地理位置的相关信息	1、 Coords 返回当前位置的坐标 Coordinates 2、 Timestamp 返回获取坐标信息的时间 字符串	必须
onError	方法失败时候的回调，返回error对象，通过这个对象返回错误类型	1、Code 返回代表错误类型的代码 有如下数值 ： ①用户未授权使用地理定位功能 ②不能确定位置 ③请求位置的尝试已超时 2、message 返回描述错误的字符串 字符串	可选
options	额外参数	1、enableHighAccuracy 告诉浏览器我们希望得到可能的高精度的地理信息 布尔值 2、timeout 限制请求位置的时间,设置多少毫秒后会报告一个超时错误 数值 3、maximumAge 告诉浏览器我们愿意接受缓存过的位置,只要它不早于指定的毫秒数 数值	可选

三、代码实现

1、实现原理：html5地理定位 + 腾讯地图

2、实现思路：

① 判断浏览器是否支持geolocation地理定位

② 用HTML5 Geolocation API (地理位置应用程序接口)获取经纬度

③ 调用腾讯地图接口，将获取到的经纬度以参数形式参入腾讯地图地理坐标中，并显示到页面上

  PS：也可以调用百度地图、谷歌地图、高德地图等，只需要将HTML5 Geolocation API获取到的值传入到相应的地图接口中

3、代码实现：

① 调用腾讯地图JavaScript API，URL路径为：http://map.qq.com/api/js?v=2.exp

② js核心代码：

function getLocation(){

var options={
    enableHighAccuracy:true, //boolean 是否要求高精度的地理信息，默认为false
    maximumAge:1000 //应用程序的缓存时间
  }

if(navigator.geolocation){
    //浏览器支持geolocation
    navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

  }else{
   //浏览器不支持geolocation
   console.log("浏览器不支持!");
  }
}

//成功时
function onSuccess(position){
  //返回用户位置
  //经度
  var longitude =position.coords.longitude;
  //纬度
  var latitude = position.coords.latitude;

//使用腾讯地图API

//腾讯地图的中心地理坐标
  var center = new qq.maps.LatLng(latitude, longitude);
  var map = new qq.maps.Map(document.getElementById("container"), {
    //地图的中心地理坐标
    center: center,
    //初始化地图缩放级别
    zoom: 16
  });

//在地图中创建信息提示窗口
  var infoWin = new qq.maps.InfoWindow({
    map: map
  });
  //打开信息窗口
  infoWin.open();
  //设置信息窗口显示区的内容
  infoWin.setContent('

'+
'您在这里
纬度：'+ latitude+ '
经度：'+longitude);
  //设置信息窗口的位置
  infoWin.setPosition(center);
}

//失败时
function onError(error){
  switch(error.code){
    case error.PERMISSION_DENIED:
      alert("用户拒绝对获取地理位置的请求");
    break;

case error.POSITION_UNAVAILABLE:
      alert("位置信息是不可用的");
    break;

case error.TIMEOUT:
      alert("请求用户地理位置超时");
    break;

case error.UNKNOWN_ERROR:
      alert("未知错误");
    break;
  }

}

window.onload=getLocation;

DEMO演示

四、注意事项：

此代码在PC端运行，会得不到数据，因为获取位置信息，以及监控位置的变化这些操作都属于敏感性操作，所以browsers在执行都会非常谨慎。它需要你在安全的环境并且获取用户的同意才会执行。

在移动端，会提示是否允许地理位置授权，用户同意后，才会继续获取数据，进行下面的操作。

   还有一点需要注意：

用HTML5 Geolocation API (地理位置应用程序接口)获得的经纬度参数，传入到腾讯地图，并显示出来后，会发现会有一定的偏移，这是因为我国把美国卫星的GPS的地球坐标，进行偏移的算法，计算后，得出了一个火星坐标。为了让火星坐标能正确的显示，又给每部导航软件加入了这个算法，可以在大家的地图上还原位置；而自己写的程序里没有加入此算法，所以出现了偏移问题，而这个加偏并不是线性的加偏，所以各地的偏移情况都会有所不同。

以上为“H5案例分享”团队原创文章，转载请注明出处！