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

• 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", {
            // 设置地图容器id
            rotateEnable: 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 对象添加到 Map
                this.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);
        });
    },