当前位置：首页 > news >正文

Vue3+Element-plus+setup使用vuemap/vue-amap实现高德地图API相关操作

news 来源：原创 2024/9/20 7:16:11

首先要下载依赖并且引入

npm安装

// 安装核心库
npm install @vuemap/vue-amap --save// 安装loca库
npm install @vuemap/vue-amap-loca --save// 安装扩展库
npm install @vuemap/vue-amap-extra --save

cdn

<script src="https://cdn.jsdelivr.net/npm/@vuemap/vue-amap/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vuemap/vue-amap/dist/style.css"></script>
<script src="https://cdn.jsdelivr.net/npm/@vuemap/vue-amap-loca/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vuemap/vue-amap-extra/dist/index.min.js"></script>

任选其一安装后引入依赖，记得换成自己注册的高德地图安全密钥和key

npm

import App from './App.vue'
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
// import VueAMapLoca from '@vuemap/vue-amap-loca';
// import VueAMapExtra from '@vuemap/vue-amap-extra';
import '@vuemap/vue-amap/dist/style.css'
initAMapApiLoader({key: 'YOUR_KEY',securityJsCode: 'securityJsCode', // 新版key需要配合安全密钥使用//Loca:{//  version: '2.0.0'//} // 如果需要使用loca组件库，需要加载Loca
})createApp(App).use(VueAMap)//.use(VueAMapLoca)//.use(VueAMapExtra).mount('#app')

cdn

window.VueAMap.initAMapApiLoader({key: 'YOUR_KEY',
});

老规矩，先上效果图

每个marker标记点对应图标和数据状态不同

代码

<el-amap:vid="'amap-demo'":zoom="zoom":center="center"style="width: 100%; height: 100%; position: relative"><el-amap-markerv-for="(marker, index) in markers":key="marker.id":position="[marker.lng, marker.lat]":icon="marker.icon"@mouseover="showInfoWindow(index)"@mouseout="hideInfoWindow"></el-amap-marker><el-amap-info-windowv-if="currentInfoWindowIndex !== null":position="[markers[currentInfoWindowIndex].lng,markers[currentInfoWindowIndex].lat,]":visible="infoWindowVisible":offset="[0, -30]"><template #default><div><strong>事故名称:</strong>{{ markers[currentInfoWindowIndex].accidentName }}<br /><strong>事故类型:</strong>{{markers[currentInfoWindowIndex].accidentType == "HSP"? "热源厂": markers[currentInfoWindowIndex].accidentType == "HPPL"? "热电厂": markers[currentInfoWindowIndex].accidentType == "IWHT"? "工业余热": markers[currentInfoWindowIndex].accidentType == "CE"? "清洁能源": markers[currentInfoWindowIndex].accidentType == "PHNW"? "供热一级网": markers[currentInfoWindowIndex].accidentType == "SHNW"? "供热二级网": markers[currentInfoWindowIndex].accidentType == "CHNW"? "庭院供热官网": markers[currentInfoWindowIndex].accidentType == "HES"? "换热站": "单元立杠及入户管"}}</div><el-stepsstyle="width: 200px; height: 300px"direction="vertical":active="markers[currentInfoWindowIndex].accidentStatus == 'IR'? 1: markers[currentInfoWindowIndex].accidentStatus == 'CR'? 2: markers[currentInfoWindowIndex].accidentStatus == 'MA'? 3: 4"><el-step:title="'事故上报 '":description="markers[currentInfoWindowIndex].accidentDesc"/><el-step:title="'确认原因 '":description="markers[currentInfoWindowIndex].reasonDesc"/><el-step:title="'物资到场 '":description="markers[currentInfoWindowIndex].situationDesc"/><el-step:title="'抢修完成 '":description="markers[currentInfoWindowIndex].summaryReportContent"/></el-steps></template></el-amap-info-window><divstyle="position: absolute;right: 0;bottom: 0;width: 120px;height: 130px;background-color: #fff;"><div style="height: 30px; line-height: 30px; text-align: center"><imgstyle="width: 20px; height: 20px; vertical-align: middle"src="../../../public/sgsb.png"/>事故上报</div><div style="height: 30px; line-height: 30px; text-align: center"><imgstyle="width: 20px; height: 20px; vertical-align: middle"src="../../../public/qryy.png"/>确认原因</div><div style="height: 30px; line-height: 30px; text-align: center"><imgstyle="width: 20px; height: 20px; vertical-align: middle"src="../../../public/wzdc.png"/>物资到场</div><div style="height: 30px; line-height: 30px; text-align: center"><imgstyle="width: 20px; height: 20px; vertical-align: middle"src="../../../public/qxwc.png"/>抢修完成</div></div></el-amap>

下面是接口返回的数据格式

{"errorcode": 0,"message": "success","data": [{"id": 574926636965957,"orgId": "35194607","accidentName": "第一个事故","accidentType": "CE","accidentStatus": "IR","address": "辽宁省抚顺市抚顺县石文镇肖庆江采摘园","areaId": "210000-210400-210421","areaInfo": "辽宁省-抚顺市-抚顺县","cityCode": "210421","lng": 123.932566,"lat": 41.664697,"findTime": 1722499341000,"accidentDesc": "第一个事故描述","reasonDesc": null,"situationDesc": null,"summaryReportContent": null},{"id": 574927337517125,"orgId": "35194607","accidentName": "2","accidentType": "HPPL","accidentStatus": "CR","address": "黑龙江省鹤岗市向阳区南翼街道地矿街","areaId": "230000-230400-230402","areaInfo": "黑龙江省-鹤岗市-向阳区","cityCode": "230402","lng": 130.306295,"lat": 47.338636,"findTime": 1722499511000,"accidentDesc": "2","reasonDesc": "第二个原因描述","situationDesc": null,"summaryReportContent": null},{"id": 574927455924293,"orgId": "35194607","accidentName": "3","accidentType": "IWHT","accidentStatus": "ERC","address": "北京市东城区龙潭街道必胜客(新光明楼店)北京天坛东门站希尔顿花园酒店","areaId": "110000-110100-110101","areaInfo": "北京市-市辖区-东城区","cityCode": "110101","lng": 116.433858,"lat": 39.883466,"findTime": 1722499542000,"accidentDesc": "3","reasonDesc": "33","situationDesc": "第三个情况描述","summaryReportContent": "22"},{"id": 575179564855365,"orgId": "35194607","accidentName": "4","accidentType": "CE","accidentStatus": "ERC","address": "内蒙古自治区锡林郭勒盟西乌珠穆沁旗巴彦花镇","areaId": "150000-152500-152526","areaInfo": "内蒙古自治区-锡林郭勒盟-西乌珠穆沁旗","cityCode": "152526","lng": 118.659128,"lat": 44.532406,"findTime": 1722561086000,"accidentDesc": "4","reasonDesc": "4","situationDesc": "4","summaryReportContent": "第三个总结汇报"},{"id": 577020505301061,"orgId": "35194607","accidentName": "测试","accidentType": "HPPL","accidentStatus": "IR","address": "辽宁省沈阳市新民市前当堡镇码头路","areaId": "210000-210100-210181","areaInfo": "辽宁省-沈阳市-新民市","cityCode": "210181","lng": 122.907173,"lat": 41.756281,"findTime": 1723010535000,"accidentDesc": "测试描述","reasonDesc": null,"situationDesc": null,"summaryReportContent": null}]
}

const data: any = ref([]);
// 地图配置
const zoom = ref(5);
const center = ref([116.397428, 39.90923]); // 初始中心坐标（北京）
const infoWindowVisible = ref(false);
const currentInfoWindowIndex: any = ref(null);
const get_report_list = () => {appAxios.get(`/emergency-repair-report/map?orgId=${orgId}&startTime=${startTime.value}&endTime=${endTime.value}`).then((res: any) => {if (res.data.errorcode == 0) {data.value = res.data.data;}});
};
// 显示信息窗体
function showInfoWindow(index: any) {currentInfoWindowIndex.value = index;infoWindowVisible.value = true;
}// 隐藏信息窗体
function hideInfoWindow() {infoWindowVisible.value = false;
}
const markers: any = ref([]);
watch(data,(newData) => {markers.value = newData.map((item: any) => ({...item,icon:item.accidentStatus == "IR"? "../../../public/sgsb.png": item.accidentStatus == "CR"? "../../../public/qryy.png": item.accidentStatus == "MA"? "../../../public/wzdc.png": "../../../public/qxwc.png",}));},{ immediate: true }
);

数据中的lng和lat对应markers定位点的经纬度来确定位置，其他的数据可以在窗体信息组件中进行自定义设置遍历渲染，其他具体相关配置项可以自行到官网查看地址如下简介 | @vuemap/vue-amap (guyixi.cn)

注意这里涉及到map遍历的时候接口还没返回数据的异步问题，可以用watch，settimeout及其他方法解决相关问题。第二点是markers数组中的icon配置可以换成自己本地或者是http的url图片再或者其他的图标，按照需求来设置，不设置默认是蓝色水滴样式。