vue 组件 使用高德地图api，绘制区域

<template>
  <div class="home_div">
    <div id="container"></div>
    <div class="input-card" style="width: 150px">
      <el-button
        class="btn"
        @click="drawPolygon"
        style="margin-bottom: 5px"
        v-if="this.path.length == 0"
      >
        绘制区域
      </el-button>
      <el-button
        class="btn"
        @click="handleopen"
        style="margin-bottom: 5px"
        v-if="this.path.length > 0"
      >
        开始编辑
      </el-button>
      <el-button
        class="btn"
        @click="handleClose"
        v-if="this.path.length > 0"
        style="margin-bottom: 5px"
      >
        保&nbsp;&nbsp;&nbsp;&nbsp;存
      </el-button>
      <el-button class="btn" @click="handleClear" v-if="this.path.length > 0">
        重&nbsp;&nbsp;&nbsp;&nbsp;绘
      </el-button>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "", //在这里填写你的安全密钥
};
export default {
  name: "MapContainer",
  props: {
    path: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      //map:null,
      mouseTool: null,
      polygon: null,
      polyEditor: null,
      pathLng: [],
      placeSearch: null,
      options: [], // 可选数据列表，详见组件文档
      selectedOptions: [], // 当前已选数据
      schoolForm: {},
    };
  },
  computed: {
    schoolList() {
      return this.$store.state.SchoolList;
    },
  },
  created() {},
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "", //设置您的key
        version: "2.0",
        plugins: [
          // "AMap.ToolBar",
          "AMap.Scale",
          "AMap.Geolocation",
          // "AMap.ControlBar",
          "AMap.MouseTool",
          "AMap.PolygonEditor",
          "AMap.PlaceSearch",
        ],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0",
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 15,
            zooms: [2, 22],
          });
          this.map.addControl(new AMap.Scale());
          this.map.addControl(
            new AMap.Geolocation({
              enableHighAccuracy: true, //是否使用高精度定位，默认:true
              timeout: 10000, //超过10秒后停止定位，默认：5s
              position: "RB", //定位按钮的停靠位置
              offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
              zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
            })
          );

          this.mouseTool = new AMap.MouseTool(this.map);
          this.mouseTool.on("draw", (event) => {
            let data = event.obj.getOptions();
            //手动绘制时创建编辑器
            this.polygon = new AMap.Polygon({
              path: data.path,
              strokeColor: "#2695FF",
              strokeWeight: 6,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
              fillColor: "#1C92FF",
              zIndex: 50,
              bubble: true,
            });
            this.map.add([this.polygon]);
            this.polyEditor = new AMap.PolygonEditor(this.map, this.polygon);
            this.polyEditor.on("end", (event) => {
              this.$emit("mapEditEnd", event.target.getOptions());
            });
            this.$emit("mapDraw", data);
          });
          //矢量图形坐标数组大于0时创建编辑器
          if (this.path.length > 0) {
            this.polygon = new AMap.Polygon({
              path: this.path,
              strokeColor: "#2695FF",
              strokeWeight: 6,
              strokeOpacity: 0.2,
              fillOpacity: 0.4,
              fillColor: "#1C92FF",
              zIndex: 50,
              bubble: true,
            });
            this.map.add([this.polygon]);
            this.polyEditor = new AMap.PolygonEditor(this.map, this.polygon);
            this.polyEditor.on("end", (event) => {
              this.$emit("mapEditEnd", event.target.getOptions());
            });
            // this.handleSelectionChange(this.name);
          }
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
            pageSize: 1,
            pageIndex: 1,
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    drawPolygon() {
      this.mouseTool.polygon({
        strokeColor: "#2695FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: "#1C92FF",
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      });
    },
    handleSelectionChange(name) {
      const keyword = name;
      // 执行高德地图 POI 搜索，详见文档
      this.placeSearch.search(keyword, (status, result) => {
        if (status === "complete") {
          this.schoolForm = result.poiList.pois[0];
        }
      });
    },
    handleopen() {
      this.polyEditor.open();
    },
    handleClose() {
      this.polyEditor.close();
    },
    handleClear() {
      this.map.clearMap();
      this.$emit("mapDraw", []);
    },
  },
};
</script>
<style scoped>
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: calc(100% - 50px);
  position: relative;
}

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
}
.input-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border-radius: 0.25rem;
  width: 22rem;
  border-width: 0;
  border-radius: 0.4rem;
  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  position: fixed;
  top: 18rem;
  right: 5rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 0.75rem 1.25rem;
}
.btn {
  margin: 0;
}
</style>
//使用
  <MapContainerVue
  ref="MapContaine"
     @mapDraw="handleMapDraw"
     @mapEditEnd="handleMapEditEnd"
     :path="path"
     :name="MapName"
   ></MapContainerVue>