微信小程序map地图画圆圈效果

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

Page({
  data: {
    markers:[
      {
        iconPath: '/resources/others.png',
        id: 0,
        latitude: 23.099994,
        longitude: 113.324520,
        width: 50,
        height: 50
      }
    ],
    circles:[{
      latitude: '23.099994',
      longitude: '113.324520',
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      radius: 400,
      strokeWidth: 2
    }],
    polygons:[{
      points: [{
        longitude: 113.3245211,
        latitude: 23.10229
      }, {
        longitude: 114.324520,
        latitude: 23.21229
      }],
      strokeWidth:5,
      zIndex:1,
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/location.png',
      position: {
        left: 0,
        top: 300 - 50,
        width: 50,
        height: 50
      },
      clickable: true
    }]
  },
  onLoad: function (options) {
    this.getCrlcle();
  },
  getCrlcle(){
    this.wxmap = wx.createMapContext('map')
    this.wxmap.getRegion({
      success: 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 = getDistance(lng1, lat1, lng1, lat2) * 1000 / 2 * 0.8;
        } else {
          radius = getDistance(lng1, lat1, lng2, lat1) * 1000 / 2 * 0.8;
        }
        this.setData({
          "circles[0].radius": radius
        });
      }
    });
  },
  getCenterLocation() {
    this.wxmap = wx.createMapContext('map')
    var that=this;
    this.wxmap.getCenterLocation({
      success(res) {
        console.log(res.longitude)
        console.log(res.latitude)
        that.getCrlcle();
        that.setData({
          "circles[0].longitude": res.longitude,
          "circles[0].latitude": res.latitude
        });
      }
    })
  },
  regionchange(e) {
    console.log(e.type)
    this.getCenterLocation();
  },
  markertap(e) {
    console.log(e.markerId)
    console.log(e);
  },
  controltap(e) {
    console.log(e.controlId)
  }
})

wxml

<map
  id="map"
  longitude="113.324520"
  latitude="23.099994"
  scale="13"
  circles="{{circles}}"
  controls="{{controls}}"
  bindcontroltap="controltap"
  markers="{{markers}}"
  bindmarkertap="markertap"
  polyline="{{polyline}}"
  show-location
  bindregionchange="regionchange"
  style="width: 100%; height: 500px;"
>
</map>