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

已于 2024-08-10 10:28:30 修改
阅读量499 收藏 2
点赞数 8
文章标签： vue.js 前端 javascript
于 2024-08-07 18:18:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72439307/article/details/140997937
版权

首先要下载依赖并且引入

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-marker
        v-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-window
        v-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-steps
            style="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>
      <div
        style="
          position: absolute;
          right: 0;
          bottom: 0;
          width: 120px;
          height: 130px;
          background-color: #fff;
        "
      >
        <div style="height: 30px; line-height: 30px; text-align: center">
          <img
            style="width: 20px; height: 20px; vertical-align: middle"
            src="../../../public/sgsb.png"
          />
          事故上报
        </div>
        <div style="height: 30px; line-height: 30px; text-align: center">
          <img
            style="width: 20px; height: 20px; vertical-align: middle"
            src="../../../public/qryy.png"
          />
          确认原因
        </div>
        <div style="height: 30px; line-height: 30px; text-align: center">
          <img
            style="width: 20px; height: 20px; vertical-align: middle"
            src="../../../public/wzdc.png"
          />
          物资到场
        </div>
        <div style="height: 30px; line-height: 30px; text-align: center">
          <img
            style="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图片再或者其他的图标，按照需求来设置，不设置默认是蓝色水滴样式。

 Abao
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值