大屏地图区域显示、复选框多选打点，自定义窗体信息（vue3+TS)

效果图：

NPM 安装 Loader：

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

并设置 key 和安全密钥：

import AMapLoader from '@amap/amap-jsapi-loader';//引入高德地图

window._AMapSecurityConfig = {
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
    key: "替换为你申请的 key", //申请好的 Web 端开发 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    AMapUI: {
      //是否加载 AMapUI，缺省不加载
      version: "1.1", //AMapUI 版本
      plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
    },
    Loca: {
      //是否加载 Loca， 缺省不加载
      version: "2.0", //Loca 版本
    },
  })
    .then((AMap) => {
      var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
      map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });

完整代码：

<template>
  <div id="map-chart"></div>
  <a-checkbox-group v-model:value="value" @change="changeCheckbox">
    <a-checkbox value="loc">坐标打点</a-checkbox>
    <a-checkbox value="text">文字打点</a-checkbox>
  </a-checkbox-group>
</template>

<script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader';//引入高德地图
import { onMounted, ref, onUnmounted } from 'vue';

// 声明全局变量 _AMapSecurityConfig
declare global {
  interface Window {
    _AMapSecurityConfig: {
      securityJsCode: string;
    };
  }
}
// 高德地图安全码
window._AMapSecurityConfig = {
  securityJsCode: '2bd59df65eacf33784ed68fbaa369b45',
}
let map;

const value = ref([]);
const locList = [[108.034657, 32.06777], [107.511763, 31.196079],
[107.931884, 31.354703]
];
const textList = [
  {
    name: '通川区',
    position: [107.504962, 31.214231],
    contant: '通川区人杰地灵'
  },
  {
    name: '大竹县',
    position: [107.20742, 30.736122],
    contant: '大竹县人杰地灵'
  },
  {
    name: '渠县',
    position: [106.970746, 30.836348],
    contant: '渠县人杰地灵'
  }
];
const countyList = [
  { name: '通川区', position: [107.42, 31.15], scaleLevel: 10.5 },
  { name: '达川区', position: [107.47763, 31.35], scaleLevel: 11 },
  { name: '大竹县', position: [107.26742, 30.668], scaleLevel: 10.5 },
  { name: '渠县', position: [106.970746, 30.96348], scaleLevel: 10.5 },
  { name: '开江县', position: [107.868609, 31.012945], scaleLevel: 11 },
  { name: '宣汉县', position: [107.931884, 31.544703], scaleLevel: 10 },
  { name: '万源市', position: [108.034657, 32.00777], scaleLevel: 10 }
]
var triMarkers = new Array();
var textMarkers = new Array();
var countyMarkers = new Array();//存放县级行政区划名称标识
var infoWindow;//信息窗口
let addLocMark = () => { };
let addTextMark = () => { };
let delLocMark = () => { };
let delTextMark = () => { };
function changeCheckbox(e) {
  if (e.includes('loc')) {
    addLocMark();
  }
  if (e.includes('text')) {
    addTextMark();
  }
  if (!e.includes('loc')) {
    delLocMark();
  }
  if (!e.includes('text')) {
    delTextMark();
  }
}

onMounted(async () => {

  // 加载高德地图
  AMapLoader.load({
    key: "c0be00cd6badf373c1f9fd9a8f0114af", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.DistrictSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {//加载成功
    map = new AMap.Map("map-chart", {  //设置地图容器id
      zoom: 8.9,           //初始化地图级别
      center: [107.56778, 31.309278], //初始化地图中心点位置
    });
    map.setMapStyle("amap://styles/darkblue");//设置地图样式
    //加载行政区划插件,用于绘制行政区划边界,区域面等功能
    AMap.plugin('AMap.DistrictSearch', function () {
      // 创建行政区查询对象
      var district = new AMap.DistrictSearch({
        // 返回行政区边界坐标等具体信息
        extensions: 'all',
        // 设置查询行政区级别为 市
        level: 'city'
      })
      // 调用 DrawSection 函数，参数为城市名、行政区划对象和是否搜索下一级标志
      DrawSection('达州市', district, true);
      // 绘制行政区划
      function DrawSection(cityName, district, isSearchNextLevel) {
        // 使用 district 对象的 search 方法查询指定的城市名
        district.search(cityName, function (status, result) {
          // 从查询结果中提取边界信息
          const bounds = result.districtList[0].boundaries;

          // 如果边界信息存在，则开始绘制
          if (bounds) {
            // 遍历所有边界
            for (let i = 0; i < bounds.length; i += 1) {
              if (isSearchNextLevel) {
                // 如果是搜索下一级（这里是市的级别），则绘制市的板块
                new AMap.Polygon({
                  map, // 设置地图实例
                  path: bounds[i], // 设置多边形路径
                  strokeColor: '#1ee7e7', // 设置线条颜色
                  fillColor: '#003c70', // 设置填充颜色
                  fillOpacity: 0.5 // 设置填充透明度
                });
              } else {
                // 如果不是搜索下一级（这里是县的级别），则绘制县的边界线
                new AMap.Polyline({
                  path: bounds[i], // 设置折线路径
                  strokeColor: '#1ee7e7', // 设置线条颜色
                  map // 设置地图实例
                });
              }
            }

            // 如果需要搜索下一级，并且有下一级行政区划信息
            if (isSearchNextLevel) {
              const districtList = result.districtList[0].districtList;
              // 遍历下一级行政区划列表
              for (let i = 0; i < districtList.length; i += 1) {
                // 递归调用 DrawSection，绘制下一级行政区划
                DrawSection(districtList[i].name, district, false);
              }
            }
          }
        });
      }
      // 隐藏其他地图添加遮罩层
      new AMap.DistrictSearch({
        extensions: 'all',
        subdistrict: 0
      }).search('达州市', function (status, result) {
        var outer = [// 外多边形坐标数组和内多边形坐标数组
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true)
        ]
        var holes = result.districtList[0].boundaries
        var pathArray = [
          outer
        ]
        pathArray.push.apply(pathArray, holes)//将holes数组中的元素添加到pathArray数组中
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: '#1ee7e7',//线颜色
          strokeWeight: 3,
          fillColor: '#05143e',//填充色
          fillOpacity: 0.8,
        })
        polygon.setPath(pathArray)
        map.add(polygon)
      })
    });

    //添加县级行政区划名称标识，可点击放大
    countyList.forEach((item) => {
      var countyMarker = new AMap.Marker({
        position: item.position,
        content: `<div style="color:#44f3fb;font-size:16px">${item.name}</div>`,
        offset: new AMap.Pixel(-20, -20)
      });
      map.add(countyMarker);
      countyMarkers.push(countyMarker);
      countyMarker.on('click', function (e) {
        map.setZoomAndCenter(item.scaleLevel, item.position);
      });
    });

    addLocMark = () => {
      locList.forEach((item) => {
        var marker = new AMap.Marker({
          position: item,
        });
        map.add(marker);
        triMarkers.push(marker);
      });
    };
    delLocMark = () => {
      map.remove(triMarkers);
    };
    addTextMark = () => {
      textList.forEach((item) => {
        var marker = new AMap.Marker({
          position: item.position,
          content: `<div class="text-mark">${item.name}</div>`,
          offset: new AMap.Pixel(-20, -20)
        });
        marker.on('click', function (e) {
          infoWindow = new AMap.InfoWindow({
            content: `<p style="color:#44f3fb;font-size:16px">标题：${item.name}</p>
          <div class="text-info">${item.contant}</div>`,
            offset: new AMap.Pixel(0, -30)
          });
          infoWindow.open(map, e.target.getPosition());
        });
        map.add(marker);
        textMarkers.push(marker);
      });
    };
    delTextMark = () => {
      map.remove(textMarkers);
      infoWindow.close();
    };
  }).catch(e => {
    console.error(e);
  });
});

onUnmounted(() => {
  map.destroy();
});
</script>

<style scoped lang="less">
#map-chart {
  width: 952px;
  height: 96%;
}

.ant-checkbox-wrapper {
  margin: 0;
  color: aliceblue;
  font-size: 16px;
}

.ant-checkbox-group {
  display: grid;
  gap: 10px;
  position: absolute;
  top: 150px;
  left: 520px;
  padding: 10px;
  background: rgba(33, 254, 254, 0.15);
  border-radius: 4%;
}
</style>
<style type="text/css">
.amap-logo {
  display: none;
  opacity: 0 !important;
}

.amap-copyright {
  opacity: 0;
}
</style>