高德地图显示圆形区域并在区域边上标注半径

bug：循环创建三个圆形区域，数组设置为[{raduis:500,color:“#FF0000”}]，然后循环取颜色会莫名其妙报错
修改为 strokeColor: [“#FF0000”, “#1EE3C2”, “#3772E9”][i]即可

 initAMap() {AMapLoader.load({key: "130cca3be68a2ff0fd5ebb6de25e4eac", // 申请好的Web端开发者Key，首次调用 load 时必填// version: "v1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15// plugins: [//   "AMap.ControlBar",//   "AMap.ToolBar",//   "AMap.Weather",//   "AMap.CitySearch",//   "AMap.Marker",//   "AMap.MouseTool",//   "AMap.PolyEditor",//   "AMap.Driving",//   "AMap.Polyline",//   "AMap.Geolocation",//   "AMap.GraspRoad",//   "AMap.Geocoder",//   "AMap.GeometryUtil.ringArea",//   "AMap.DistrictSearch",//   "AMap.MoveAnimation",// ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("containerMap", {// 设置地图容器idrotateEnable: true,pitchEnable: true,zoom: 13,pitch: 50,rotation: -15,viewMode: "3D", //开启3D视图,默认为关闭zooms: [2, 20],center: [119.419251, 32.400703],mapStyle: "amap://styles/blue", //设置地图的显示样式});// 工具条// var controlBar = new AMap.ControlBar({//   position: {//     right: "10px",//     top: "10px",//   },// });// this.map.addControl(controlBar);// var toolBar = new AMap.ToolBar({//   position: {//     right: '40px',//     top: '110px'//   }// });// this.map.addControl(toolBar)this.map.on("complete", () => {console.log("地图加载完成");// -------展示警情中心点 this.position --------if (this.position) {// 添加中心点标记var marker = new AMap.Marker({position: new AMap.LngLat(...this.position),icon: new AMap.Icon({image: fireIcon,imageSize: new AMap.Size(26, 34),}),});this.map.add(marker);//设置圆形位置var center = new AMap.LngLat(...this.position);//设置圆的半径大小var radius = [500, 1000, 1500];radius.map((item, i) => {//创建圆形 Circle 实例var circle = new AMap.Circle({center: center, //圆心radius: item, //半径borderWeight: 3, //描边的宽度strokeColor: ["#FF0000", "#1EE3C2", "#3772E9"][i], //轮廓线颜色strokeOpacity: 1, //轮廓线透明度strokeWeight: 2, //轮廓线宽度fillOpacity: 0.1, //圆形填充透明度// strokeStyle: "dashed", //轮廓线样式// strokeDasharray: [10, 10],fillColor: ["#FF0000", "#1EE3C2", "#3772E9"][i], //圆形填充颜色zIndex: 50, //圆形的叠加顺序});//圆形 Circle 对象添加到 Mapthis.map.add(circle);//根据覆盖物范围调整视野this.map.setFitView([circle]);// 获取圆心坐标为center，半径为radius米，最右侧bearing边线上的点function getEdgePointOfCircle(center, radius, bearing) {// 中心经纬度var lat = center[1];var lon = center[0];// 将角度转换为弧度var brngRad = (bearing * Math.PI) / 180;// 地球平均半径，单位米，用于近似计算var R = 6371000;// 计算新坐标的纬度var lat2 = Math.asin(Math.sin((lat * Math.PI) / 180) * Math.cos(radius / R) Math.cos((lat * Math.PI) / 180) *Math.sin(radius / R) *Math.cos(brngRad));// 计算新坐标的经度var lon2 =(lon * Math.PI) / 180 +Math.atan2(Math.sin(brngRad) *Math.sin(radius / R) *Math.cos((lat * Math.PI) / 180),Math.cos(radius / R) -Math.sin((lat * Math.PI) / 180) * Math.sin(lat2));// 转换回度数并返回结果return [(lon2 * 180) / Math.PI, (lat2 * 180) / Math.PI];}// 在圆的边缘添加半径标注let addRadiusLabel = () => {// 计算标注位置，这里简单地将标注放在圆心右侧，根据实际情况调var labelPosition = getEdgePointOfCircle(this.position,item,90);// 创建文本标注var text = new AMap.Text({text: item + "米", //标记显示的文本内容anchor: "center", //设置文本标记锚点位置draggable: false, //是否可拖拽cursor: "pointer", //指定鼠标悬停时的鼠标样式。angle: 0, //点标记的旋转角度style: {//设置文本样式，Object 同 css 样式表padding: ".1rem 0.2rem","border-radius": ".1rem","background-color": "transparent",border: "1px solid rgba(0, 0, 0, 0.5)","border-color": ["#FF0000", "#1EE3C2", "#3772E9"][i],"text-align": "center","font-size": ".1875rem",color: "white",},position: labelPosition, //点标记在地图上显示的位置});text.setMap(this.map); //将文本标记设置到地图上};// 调用函数添加半径标注addRadiusLabel();});}});}).catch((e) => {console.log(e);});},