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

首先，经过测试，使用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')
    }
})

来源：oschina

链接：https://my.oschina.net/u/3371661/blog/3217782

标签

小程序

var

var函数