效果图：
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>
