实现:例如像这样,只展示厦门的地图,隐藏其他地方,点击区域,在单独展示区,点击返回回到总览。 ![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ca4c44ea69e576bc63f5af91e414f54a.png)
一、获取高德地图的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>