业务场景:当选择一个省市区时,地图平移到指定经纬度,并根据已有的经纬度数据进行高亮显示省市区的轮廓。
实现代码:
<template>
<div>
<!-- 地图容器 -->
<div id="container"></div>
<!-- 省份选择 -->
<select v-model="selectedProvince" @change="zoomToProvince">
<option value="">请选择省份</option>
<option
v-for="province in provinces"
:value="province.name"
:key="province.name"
>
{{ province.name }}
</option>
</select>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
data() {
return {
map: null, // 地图对象
selectedProvince: "", // 选中的省份
provinces: [
// 省份列表,您可以根据需求自行扩展
{
name: "北京",
center: [116.397428, 39.90923],
border: [
// 北京市部分数据
[116.011083, 40.25278],
[116.011276, 40.252835],
[116.011578, 40.252925],
[116.011894, 40.252998],
[116.012145, 40.253047],
[116.003952, 40.241381],
[116.004241, 40.241437],
[116.004396, 40.24146],
[116.004654, 40.241504],
[116.005106, 40.241575],
[116.00526, 40.241596],
[116.011083, 40.25278],
],
},
{ name: "上海", center: [121.472644, 31.231706] },
],
highlightPolygon: null, // 用于高亮显示的多边形对象
};
},
mounted() {
// 初始化地图
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: "高德地图的key",
version: "2.0",
})
.then((AMap) => {
this.map = new AMap.Map("container", {
resizeEnable: true,
viewMode: "3D", //是否为3D地图模式
zoom: 5, //初始化地图级别
center: [104.065735, 35.759367], //初始化地图中心点位置
});
})
.catch((e) => {
console.log(e);
});
},
zoomToProvince() {
// 清除之前的高亮显示
if (this.highlightPolygon) {
this.highlightPolygon.setMap(null);
this.highlightPolygon = null;
}
// 根据选中的省份平移到该省份
const selectedProvinceData = this.provinces.find(
(province) => province.name === this.selectedProvince
);
// 此方法是将地图平移到选择的经纬度位置
// if (selectedProvinceData) {
// this.map.setZoomAndCenter(5, selectedProvinceData.center); // 设置缩放级别和中心点
// // 在地图上高亮显示选中的省份(您需要编写自己的高亮省份的代码)
// // 通常可以通过绘制多边形、添加覆盖物等方式来实现高亮显示
// }
// 省市区轮廓高亮
if (selectedProvinceData) {
this.highlightPolygon = new AMap.Polygon({
path: selectedProvinceData.border,
strokeColor: "#FFD700", // 黄色
strokeWeight: 2,
strokeOpacity: 1,
fillColor: "#FFD700", // 填充颜色也设为黄色
fillOpacity: 0.2,
strokeStyle: "dashed", // 虚线样式
zIndex: 100,
});
this.highlightPolygon.setMap(this.map);
// 将地图视角调整到选中省份
this.map.setFitView([this.highlightPolygon]);
}
},
},
};
</script>
<style>
#container {
width: 1400px;
height: 400px;
}
</style>