微信小程序在地图上标点 markers & 画圈显示范围 circles

源代码：

var EARTH_RADIUS = 6378.137; //地球半径
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 存放当前位置经纬度
    latitude: "",
    longitude: "",
    //自定义markers数组，用于地图上特定点的显示；从数据库读取当前位置周围1km以内的点，赋值到本数组
    markers: [{
        // 标记点（iconPath图像路径,id应该无所谓 可以用来判断用户点击了哪个marker把,经纬度，还有图像高度、宽度）
        iconPath: "../../icons/dingwei.png",
        id: 1,
        latitude: "28.227",
        longitude: "112.935",
        height: 34
      },
      {
        iconPath: "../../icons/dingwei.png",
        id: 2,
        latitude: "28.224",
        longitude: "112.939",
        height: 34
      },
      {
        iconPath: "../../icons/dingwei.png",
        id: 3,
        latitude: "28.230",
        longitude: "112.943",
        height: 34
      },
    ],
    // 画圆的参数设定（color边界框线颜色，radius半径，这里设了等于没设，因为后面会根据画面来匹配大小，stokeWidth边界框线粗细）
    circles: [{
      latitude: '',
      longitude: '',
      color: '#ff4163',
      fillColor: '#7cb5ec88',
      radius: 400,
      strokeWidth: 2
    }],
  },
  onLoad: function () {
    this.getCrlcle()
  },
  onShow: function () {
    // 拿到当前经纬度，并赋值
    wx.getLocation({
        type: 'gcj02',
      })
      .then(res => {
        console.log(res);
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          // 注意json数组赋值的格式
          'circles[0].latitude': res.latitude,
          'circles[0].longitude': res.longitude
        })
        console.log(this.data.circles);
      })
      .catch(err => {
        wx.showModal({
          title: "提示",
          content: "获取定位信息失败",
          showCancel: false
        })
      })
  },
  // 点击marker的响应事件
  markertap: function (e) {
    console.log("点击marker", e);
  },
  // 计算距离
  rad: function (d) {
    return d * Math.PI / 180.0;
  },
  getDistance: function (lng1, lat1, lng2, lat2) {
    var radLat1 = this.rad(lat1);
    var radLat2 = this.rad(lat2);
    var a = radLat1 - radLat2;
    var b = this.rad(lng1) - this.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; //返回数值单位：公里
  },
  // 设置radios半径
  getCrlcle() {
    this.wxmap = wx.createMapContext('map')
    this.wxmap.getRegion({})
      .then(res => {
        console.log(res + 'get');
        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 = this.getDistance(lng1, lat1, lng1, lat2) * 1000 / 2 * 0.8;
        } else {
          radius = this.getDistance(lng1, lat1, lng2, lat1) * 1000 / 2 * 0.8;
        }
        this.setData({
          "circles[0].radius": radius
        });
        console.log(this.data.circles[0].radius);
      })
  },
})

<view class="showMap">
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14.5" controls="{{controls}}" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" show-location="true" style="width: 100%; height: 100%;" circles="{{circles}}"></map>
</view>