微信小程序中使用地图和定位的一些坑和经验

首先,经过测试,使用GCJ02(火星坐标)比WGS84(GPS)的坐标在计算距离的时候更为精确。在微信小程序中使用内置接口获取用户坐标,代码放在app.js里:

App({
  getLocation: function () {
    var that = this
    wx.getLocation({
      //type: 'wgs84',
      type: 'gcj02',
      success: function (res) {
        that.globalData.latitude = res.latitude
        that.globalData.longitude = res.longitude
        //var speed = res.speed
        //var accuracy = res.accuracy
      }
    })
  }
 
})

关于坐标系的拓展知识,我看了这篇文章http://blog.sina.com.cn/s/blog_80a9926b0101ktoa.html

项目中,我一开始用百度坐标工具获取了自家小区正门坐标,结果在微信小程序里这个坐标变成的是小区后门之外,大约有1公里的误差。之后改用腾讯地图坐标获取工具重新获取坐标,才消除了这个误差。原来百度地图坐标是经过加密的,有一些偏移,只能用在百度自家产品上。微信小程序开发,还是用腾讯自家地图比较好。另外,高德地图和腾讯地图坐标也是通用的。

接下来是判断两个坐标之间的距离:

var EARTH_RADIUS = 6378.137; //地球半径
function rad(d) {
    return d * Math.PI / 180.0;
}
function getDistance(lng1, lat1, lng2, lat2) {
  var radLat1 = rad(lat1);
  var radLat2 = rad(lat2);
  var a = radLat1 - radLat2;
  var b = rad(lng1) - rad(lng2);
  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2)
    + Math.cos(radLat1) * Math.cos(radLat2)
    * Math.pow(Math.sin(b / 2), 2)));
  s = s * EARTH_RADIUS;
  s = Math.round(s * 10000) / 10000;
  return s;//返回数值单位:公里
}

另一个据说是精度更好的函数,目前尚未验证,留待备用:

function getFlatternDistance(lat1,lng1,lat2,lng2){
    var f = getRad((lat1 + lat2)/2);
    var g = getRad((lat1 - lat2)/2);
    var l = getRad((lng1 - lng2)/2);
 
    var sg = Math.sin(g);
    var sl = Math.sin(l);
    var sf = Math.sin(f);
 
    var s,c,w,r,d,h1,h2;
    var a = EARTH_RADIUS;
    var fl = 1/298.257;
 
    sg = sg*sg;
    sl = sl*sl;
    sf = sf*sf;
 
    s = sg*(1-sl) + (1-sf)*sl;
    c = (1-sg)*(1-sl) + sf*sl;
 
    w = Math.atan(Math.sqrt(s/c));
    r = Math.sqrt(s*c)/w;
    d = 2*w*a;
    h1 = (3*r -1)/2/c;
    h2 = (3*r +1)/2/s;
 
    return d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
}

此外还踩到一个坑,在小程序开发工具中没有表现出来,在真机调试才发现,地图marker的坐标如果想通过JS修改,光修改绑定坐标数据是无效的,必须通过小程序的地图组件控制接口wx.createMapContext,用translateMarker方法修改标记坐标才行。
首先在页面onReady创建对象

onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('restaurantMap')
},

然后在需要修改坐标的时候用此方法

this.mapCtx.translateMarker({
    markerId: 0,//所要操作的标记ID,在data中已预先定义
    autoRotate: false,
    rotate: 0,
    duration: 100,
    destination: {//新的坐标值
        latitude: ***,
        longitude: ***,
    },
    animationEnd() {
    console.log('animation end')
    }
})

2018年3月30日更新一篇博客
微信小程序地图相关的开发经验补充

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/1696.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

如本文对你有用,请在页面右侧栏扫码领取我的支付宝红包,作为打赏吧 (喂到底是我赏你还是你赏我啊-_-!)

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

9 关于 “微信小程序中使用地图和定位的一些坑和经验” 的评论

  1. JerryZhang

    官方示例 translateMarker 一直报错:渲染层错误 VM7412:2 TypeError: Cannot read property ‘map’ of undefined

    不知道你有没有遇到过。

    回复
  2. jin

    博主 你好 我做微信小程序时发现用map原生组件定位不准的问题 type: ‘gcj02′, type:’wgs84’ 这个2个type 我都改过 不知道为什么不准 想差2公里,请博主有空解答下,十分感谢

    回复
    1. Brain 文章作者

      有时候是地图在你这个区域本身不准,你可以多定位几个地方,距离远一些,看看是不是都相差同样的距离和方向。
      有时候可能是因为自己坐标算法的原因,这就很难说了

      回复
      1. jin

        理论上来说 获取当前位置 只需调用 wx.getLocation({
        type: ‘gcj02’,
        success: (res)=> {
        console.log(res)
        this.setData({
        latitude: res.latitude,
        longitude: res.longitude,
        这个方法就行了 里面就有经纬度是吗? 我是怕我自己写错了

        回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注