【小程序开发】地图circle自适应大小（radius适配）

问题

小程序地图组件map可以配置circles，用于标示当前位置的一个范围
circle有一个字段radius来规定圆圈半径
不过，这个值是与地图对应，即地图缩放时，它并不会改变大小

circle的透明度是通过配置fillColor属性的#XXXXXX00最后2位实现的，当不配置（即颜色值只有6位）时等同于opacity=1，当为00时，等同于opacity=0，以此类推。

官网api：

circles 在地图上显示圆

属性	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	String	否	十六进制
fillColor	填充颜色	String	否	十六进制
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否

这里的radius就是来表示圆的半径的

解决方案

比例尺

最开始是打算通过地图比例尺，然后就可以计算出来了，结果，官方论坛

emmmm，算了，另外想方案= =

是时候考验真正的技术了

官方有个接口
MapContext.getRegion(Object object)
基础库 1.4.0 开始支持，低版本需做兼容处理。

获取当前地图的视野范围

参数
Object object

属性	类型	默认值	必填	说明
success		function	否	接口调用成功的回调函数
fail		function	否	接口调用失败的回调函数
complete		function	否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数
参数

Object res

属性	类型	说明
southwest	number	西南角经纬度
northeast	number	东北角经纬度

通过这个接口可以获取到2个坐标（左下角和右上角）
这样，我们就可以通过这2个坐标计算出2点之间的水平/垂直距离
从而得到radius的值

radius值为number，而且根据观察应该是1代表1m

计算2坐标换算距离我是参考微信小程序中使用地图和定位的一些坑和经验中的计算方法

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;//返回数值单位：公里
}

通过getRegion接口我们得到2个坐标值，通过计算判断，得到短边，然后进行计算短边实际距离

this.wxmap.getRegion({
   success:res=>{
       let lng1 = res.northeast.longitude;
       let lat1 = res.northeast.latitude;
       let lng2 = res.southwest.longitude;
       let lat2 = res.southwest.latitude;

       let longitude = lng1 - lng2;
       let latitude = lat1 - lat2;
       let flag = longitude>latitude?true:false;
       let radius = 0;
       //计算得到短边，然后再通过*1000转变为m，除2得到半径，*0.8优化显示，让圈圈只占界面的80%
       if(flag){
           radius= app.getDistance(lng1,lat1,lng1,lat2)*1000/2*0.8;
       }else{
           radius= app.getDistance(lng1,lat1,lng2,lat1)*1000/2*0.8;
       }
       this.setData({
           "circles[0].radius":radius
       });
   }
});

这样，所需要的效果就达到了。