小程序地图多个 circles 使用demo

效果图：

代码：

var that;
const app = getApp()
const util = require("../../utils/util.js")
const data = require("../../utils/map.js")
Page({
  data: {
    pageShow: false,
    scale: 15,
    obj: {},
    longitude: 116.34665554470486,
    latitude: 39.9463560655382,
    in_val: '',
    showModalStatus: false,
    key: 'sadsad',
    markers: [],
    circles: []
  },

  onLoad(options) {
    data.map((item) => {
      this.setMapItemMarkers(item.longitude, item.latitude)
    })
    console.log('data', data)
    this.setData({
      latitude: data[0].latitude,
      longitude: data[0].longitude,
      

    })
  },
  // 设置起点终点坐标
  setMapItemMarkers(longitude, latitude) {
    var obj_item = {
      iconPath: "/img/seat.png",
      id: 0,
      longitude: longitude,
      latitude: latitude,
      width: 30,
      height: 30
    };
    var circles_aa = {
      latitude: latitude,
      longitude: longitude,
      color: '#FF0000DD',
      fillColor: '#7cb5ec88',
      radius: 160,
      strokeWidth: 1
    }
    var circles = this.data.circles || [];


    var markers = this.data.markers || [];
    markers.push(obj_item);
    circles.push(circles_aa);
    this.setData({
      markers, circles
    })
  },

})

wxml

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

css

map{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  right: 0;
  height: 100%;
}
page{
  height: 100%;
}