效果图：

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.15plugins: ["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> 容器的 idmap.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.15plugins: ['AMap.DistrictSearch'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {//加载成功map = new AMap.Map("map-chart", {  //设置地图容器idzoom: 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].boundariesvar 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>