vue3+高德地图

参考文档

入门文档 https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

api文档 参考手册-地图 JS API v2.0 | 高德地图API

官方示例 多边形的绘制-矢量图形-示例中心-JS API 2.0 示例 | 高德地图API

未解决问题：

点击的时候缩放卡顿

不要问我为什么只写了一半，因为老板无语，一直哔哔，要推进度，难点都不管，只要能用就行。

未完成代码

<template>
  <div class="container">
    <div id="container"></div>
  </div>
</template>

<script>
import { reactive, toRefs, defineComponent, onBeforeMount } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
export default defineComponent({
  name: "AreaMap",
  setup() {
    const state = reactive({
      map: null,
      polyEditor: null,
      pathList: [],
      flag: false,
      polygon: null,
      /* pathList: [
        [116.475334, 39.997534],
        [116.476627, 39.998315],
        [116.473421, 39.998717],
      ], */
    });
    onBeforeMount(() => {
      initAMap();
    });
    const initAMap = () => {
      AMapLoader.load({
        key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填这个可以，这个key一定要为web端JSP的，这个是个坑点
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.PolygonEditor",
          "AMap.PlaceSearch",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        state.map = new AMap.Map("container", {
          resizeEnable: true,
          zoom: 6, //初始化地图级别
          center: [114.573471, 25.128443], //初始化地图中心点位置
          viewMode: "3D",
          zooms: [2, 12],
        });
        drawPolygon(AMap);
        state.map.on("click", function (ev) {
          if (state.pathList.length < 3) {
            const data = [ev.lnglat.lng, ev.lnglat.lat];
            state.pathList.push(data);
            if (state.pathList.length == 3) {
              drawPolygon(AMap);
            }
          } else {
            if (!state.flag) {
              closePolygon();
            }
          }
        });
      });
    };
    // 绘制多边形
    const drawPolygon = (AMap) => {
      state.polygon = new AMap.Polygon({
        path: state.pathList,
      });
      state.map.add([state.polygon]);
      state.map.setFitView();
      editPolygon(AMap, state.polygon);
    };
    // 编辑多边形
    const editPolygon = (AMap) => {
      state.polyEditor = new AMap.PolygonEditor(state.map, state.polygon);
      state.polyEditor.open(state.polygon);
    };
    // 停止编辑多边形
    const closePolygon = () => {
      state.polyEditor.close();
    };
    return {
      ...toRefs(state),
      initAMap,
      drawPolygon,
      editPolygon,
      closePolygon,
    };
  },
});
</script>

<style lang="scss" scoped>
#container {
  width: 1000px;
  height: 1000px;
}
</style>