实现：例如像这样，只展示厦门的地图，隐藏其他地方，点击区域，在单独展示区，点击返回回到总览。

一、获取高德地图的key，和密钥

地址：高德控制台
具体的获取流程就不教授了，百度很多

二、安装

npm i @amap/amap-jsapi-loader --save

三、引入使用

要注意的是，因为使用了行政服务搜索的api，它的search()方法要有回调，就必须配置密钥

点击查看官方推荐的密钥使用方式

      window._AMapSecurityConfig = {
        securityJsCode: "你的密钥",
      };

主要使用的api: 行政区查询服务（AMap.DistrictSearch）

完整代码 (写的anyts懂得都懂)

<template>
  <div class="home_div">
    <div class="map-title">
      <h3>JSAPI Vue3地图组件示例</h3>
      <div v-if="back" id="back" @click="showAllMap" style="cursor: pointer;">返回</div>
    </div>
    <div id="container"></div>
  </div>
</template>
<script lang="ts" setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { ref,onMounted } from "vue";

    const map = shallowRef(null) as any;
    const AMap = shallowRef(null) as any;
    const back = ref(false);
    const polygons = shallowRef([]) as any; // 区描边、遮罩
    const district = shallowRef(null) as any;
    const polygon = shallowRef(null) as any; // 市描边、遮罩
   
    /*  
    返回区域对应颜色
    adcode:厦门市	        350200
            厦门市市辖区	350201
            思明区	        350203
            海沧区	        350205
            湖里区	        350206
            集美区	        350211
            同安区	        350212
            翔安区	        350213
            */
   function getColorByAdcode(adcode: string) {
      let colors = {
        "350200": "#111111",
        "350201": "#456aed",
        "350203": "428cced",
        "350205": "#a456e1",
        "350206": "#123fee",
        "350211": "#666eee",
        "350212": "#963qde",
        "350213": "#784eda",
      } as any;
      return colors[adcode];
    }
    // 初始化遮罩
   function initArea(city: string, isChildDraw: boolean = false) {
      district.value.search(city, function (status: string, result: any) {
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
          new AMap.value.LngLat(-360, 90, true),
          new AMap.value.LngLat(-360, -90, true),
          new AMap.value.LngLat(360, -90, true),
          new AMap.value.LngLat(360, 90, true),
        ];
        console.log(result);

        // 绘制遮罩
        var holes = result.districtList[0].boundaries;
        var pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        polygon.value = new AMap.value.Polygon({
          pathL: pathArray,
          strokeColor: "#00eeff",
          strokeWeight: 1,
          fillColor: "#020933",
          fillOpacity: 1,
        });
        polygon.value.setPath(pathArray);
        map.value.add(polygon.value);
        // 判断是否要绘制子区域
        if (isChildDraw) {
            // 将搜索层级设置为 区、县
          district.value.setLevel("district");
          for (let i = 0; i < result.districtList[0].districtList.length; i++) {
            areaPolyline(result.districtList[0].districtList[i].adcode);
          }
        }
      });
    }
    // 显示总览
   function  showAllMap() {
      back.value = false;
      if (polygon.value) {
        // 清除遮罩
       map.value.remove(polygon.value);
      }
      initArea("厦门市", true);
      map.value.setCenter([118.113994, 24.614998]);
      map.value.setZoom(11);
    }
    // 绘制区域描边
   function  areaPolyline(adcode: string) {
      if (polygons.value.length) {
        map.value.remove(polygons.value);
        polygons.value = [];
      }
      district.value.search(adcode, function (status: string, result: any) {
        console.log("区", result);
        //   绘制区域描边
        let bounds = result.districtList[0].boundaries;
        for (let i = 0; i < bounds.length; i++) {
          const color = getColorByAdcode(result.districtList[0].adcode);
          const polygonItem = new AMap.value.Polygon({
            path: bounds[i],
            strokeColor: "#784eda",
            strokeWeight: 4,
            fillColor: "#784eda",
            fillOpacity: 0,
          });
          // 添加监听事件
          polygonItem.on("mouseover", () => {
            if (!back.value) {
              polygonItem.setOptions({
                fillOpacity: 0.7,
              });
            }
          });
          // 添加点击事件
          polygonItem.on("click", () => {
            // 判断是否为市级
            if (!back.value) {
                // 显示返回按钮
              back.value = true;
              map.value.setZoom(12);
              // 修改中心位置为区级中心
              map.value.setCenter([
                result.districtList[0].center.lng,
                result.districtList[0].center.lat,
              ]);
            //   绘画
              initArea(result.districtList[0].adcode, false);
            }
          });
          polygonItem.on("mouseout", () => {
            polygonItem.setOptions({
              fillOpacity: 0,
            });
          });
          polygons.value.push(polygonItem);
        }
        map.value.add(polygons.value);
      });
    }
   function  ininMap() {
      // 这个配置很重要，必须设置，否则你的 行政服务搜索api无法使用生成回调
      window._AMapSecurityConfig = {
        securityJsCode: "密钥",
      };
      AMapLoader.load({
        key: "你的key", //设置您的key
        version: "2.0",
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.Polygon",
          "AMap.DistrictSearch",
          "AMap.Object3DLayer",
          "AMap.Object3D",
          "AMap.Polyline",
        ],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0.0",
        },
      })
        .then((e) => {
          AMap.value = e;
          map.value = new AMap.value.Map("container", {
            viewMode: "3D",
            zoom: 11,
            zooms: [10, 20],
            center: [118.113994, 24.614998],
          });
         district.value = new AMap.value.DistrictSearch({
            subdistrict: 3, //获取边界返回下级行政区
            extensions: "all", //返回行政区边界坐标组等具体信息
            level: "city", //查询行政级别为 市
          });
         initArea("厦门市", true);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  }
  onMounted(() => {
    //DOM初始化完成进行地图初始化
    ininMap();
  })
</script>
<style scope>
.home_div {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  position: relative;
}
#container {
  height: 100vh;
  width: 100%;
  padding: 0px;
  margin: 0px;
}
.map-title {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: rgba(27, 25, 27, 0.884);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
h3 {
  z-index: 2;
  color: white;
}
</style>

效果图如文章开头图片