微信内前端H5定位方式比较

在微信内使用定位功能,如果能借助到微信app自身的定位优势,定位才能更加精准。注意:使用定位,摄像头,声音等都需要通过https协议访问网站。

1. 使用原生接口Geolocation

var options = {
  enableHighAccuracy: true, //true为高精度,但耗电量增加
  timeout: 5000, //超时时间必填,否则默认为无穷大
  maximumAge: 0 //位置的缓存时间,默认0即不缓存
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log('Latitude : ' + crd.latitude);
  console.log('Longitude: ' + crd.longitude);
  console.log('More or less ' + crd.accuracy + ' meters.');
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);

注意:这种方式只能获取wgs84的坐标,如果想在腾讯地图中显示则需要转换成火星坐标gcj02;还有一个大坑,返回的位置是Coordinates 对象,使用JSON.stringify时返回的是空的"{}",解决方法是JSON.stringify($.extend({},position))。

2.使用微信JS-SDK获取地理位置接口

wx.getLocation({
  type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
    var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
    var speed = res.speed; // 速度,以米/每秒计
    var accuracy = res.accuracy; // 位置精度
  }
});

优点是借用了微信的定位功能,定位更精准了,可以指定坐标类型了,但缺点是需要有公众号及其开发经验。

3.使用腾讯地图的前端定位组件

此组件更为强大,同样使用了微信的定位功能,但又不需要微信服务号,返回的字段更详细,还提供了IP定位,监听位置信息的改变等功能(并且微信之外也能用)。

这里需要用到开发密钥,注册地址如下:

https://lbs.qq.com?lbs_invite=RLV8FLR

先直观的来段json,展示一下有哪些字段吧:

{
    "module": "geolocation",
    "type": "cache",
    "adcode": "310101", //行政区ID,六位数字, 前两位是省,中间是市,后面两位是区
    "nation": "中国",
    "province": "上海市",
    "city": "上海市",
    "district": "黄浦区",
    "addr": "黄浦区延安高架路(大世界地铁站西北)",
    "lat": 31.228474, //火星坐标(gcj02),腾讯、Google、高德通用
    "lng": 121.478224,
    "accuracy": 600 //误差范围,以米为单位
}

是不是一下就把前面的都比下去了。下面提供一个完整示例:




    
    前端定位模块
    
    



    

点击下面的按钮,获得对应信息:

总结:微信里定位就选腾讯地图吧,而且也是小程序的不二选择呀。

你可能感兴趣的:(地图,腾讯地图,定位,javascript)