Vue3+setup使用vuemap/vue-amap实现地图相关操作

首先要下载依赖并且引入

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图片再或者其他的图标，按照需求来设置，不设置默认是蓝色水滴样式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/394965.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

软件测试需要具备的基础知识【功能测试】---前端知识（三）

软件测试需要具备的基础知识【功能测试】---前端知识（三）

​ ​ 您好&#xff0c;我是程序员小羊&#xff01; 前言 为了更好的学习软件测试的相关技能&#xff0c;需要具备一定的基础知识。需要学习的基础知识包括&#xff1a; 1、计算机基础 2、前端知识 3、后端知识 4、软件测试理论 后期分四篇文章进行编写&#xff0c;这是第二篇 …
阅读更多...
使用es-hadoop同步hive和es之间数据

使用es-hadoop同步hive和es之间数据

&#x1f4bb;近期在华为云连接es时的时候发现不能输入账号密码&#xff0c;后面联系华为工程师了解到&#xff0c;华为云默认是非安全模式&#xff0c;即不需要输入账号密码。 如果对你有所帮助&#xff0c;欢迎点赞收藏关注不迷路哦&#x1f493; 目录 使用es-hadoop同步h…
阅读更多...
AI时代，我们还可以做什么？

AI时代，我们还可以做什么？

最近看了本书&#xff0c;书名叫做《拐点&#xff1a;站在 AI 颠覆世界的前夜》&#xff0c;作者是万维钢。 本想着看完后&#xff0c;就能掌握一整套 AI 技巧&#xff0c;结果——竟然学了很多道理。 这本书讨论了以下话题&#xff1a; 我们该怎么理解这个 AI 大时代的哲学&am…
阅读更多...
国产数据库备份恢复实现

国产数据库备份恢复实现

数据库备份恢复是数据库高可用的基本能力&#xff0c;如何通过备份数据快速高效的恢复业务并且满足不同场景下的恢复需求&#xff0c;是各数据库厂商需要关注的要点。本文将介绍几种国产数据库的备份恢复功能&#xff0c;以加深了解。 1、数据库备份恢复方案 数据库备份是生产…
阅读更多...
函数实例讲解（七）

函数实例讲解（七）

文章目录 清洗数据的函数&#xff08;TRIM、CLEAN&#xff09;1、TRIM2、CLEAN3、CONCATENATE4、TEXTJOIN 函数综合练习COUNTIF Excel函数总结1、判断类2、求和类3、计数类4、求平均5、查找引用类6、求数据极值类7、四舍五入类8、提取类9、日期类10、文本处理类11、随机数12、排…
阅读更多...
基于SpringBoot+Vue的校园失物招领系统(带1w+文档)

基于SpringBoot+Vue的校园失物招领系统(带1w+文档)

基于SpringBootVue的校园失物招领系统(带1w文档) 基于SpringBootVue的校园失物招领系统(带1w文档) 本课题研发的校园失物招领系统管理系统&#xff0c;就是提供校园失物招领系统信息处理的解决方案&#xff0c;它可以短时间处理完信息&#xff0c;并且这些信息都有专门的存储设…
阅读更多...
MyBatis 基本操作 - 注解版

MyBatis 基本操作 - 注解版

目录 一&#xff0c;查询 - select 1.1 全列查询 1.2 指定列查询 1.3 赋值问题 方法一&#xff1a;起别名 方法二&#xff1a;结果映射 方法三&#xff1a;添加配置 二&#xff0c;新增 - Insert 2.1 使用对象插入 2.2 获取主键 三&#xff0c;删除 - Delete 四&am…
阅读更多...
nestjs 全栈进阶--文件上传

nestjs 全栈进阶--文件上传

nest new upload -p pnpm pnpm i multer pnpm i -D types/multer 允许跨域 1. 单文件上传 我们去新增一个用于上传的handler Post(upload) UseInterceptors(FileInterceptor(file, {dest: uploads })) uploadFile(UploadedFile() file: Express.Multer.File, Body() body) {…
阅读更多...
Git使用错误分析

Git使用错误分析

一.fatal: Pathspec is in submodule 我做了这样的错误操作&#xff0c;在一个仓库下的一个子目录&#xff0c;执行了git init 创建了一个子仓库&#xff0c;然后想删掉这个子仓库&#xff0c;就只删除了该子目录下的.git文件夹&#xff0c;而没有删除缓存&#xff0c;执行如下…
阅读更多...
Python | Leetcode Python题解之第328题奇偶链表

Python | Leetcode Python题解之第328题奇偶链表

题目&#xff1a; 题解&#xff1a; class Solution:def oddEvenList(self, head: ListNode) -> ListNode:if not head:return headevenHead head.nextodd, even head, evenHeadwhile even and even.next:odd.next even.nextodd odd.nexteven.next odd.nexteven even…
阅读更多...
UVM（3）TLM通信

UVM（3）TLM通信

基本定义 A的方框称之为PORT&#xff0c;B的圆圈称之为EXPORT 要注意&#xff1a;无论是get还是put操作&#xff0c; 其发起者拥有的都是PORT端口&#xff0c; 而不是EXPORT transport操作&#xff0c; 如 transport操作相当于一次put操作加一次get操作&#xff0c; 数据流先…
阅读更多...
Spring统一功能处理：拦截器、响应与异常的统一管理

Spring统一功能处理：拦截器、响应与异常的统一管理

目录 一.拦截器 二.统一数据返回格式 三.统一异常处理 一.拦截器 拦截器是Spring框架提供的核⼼功能之⼀&#xff0c;主要⽤来拦截⽤⼾的请求&#xff0c;在指定⽅法前后&#xff0c;根据业务需要执⾏预先设定的代码。 也就是说&#xff0c;允许开发⼈员提前预定义⼀些逻辑…
阅读更多...
c语言-文件

c语言-文件

11 文件 目录 11 文件 一、文件系统 二、文件操作方式 1、基于缓冲区文件操作 2、基于非缓冲区文件操作 三、文件操作的常用函数 1、fopen 2、fclose 3、fputc 4、fgetc 5、rewind 6、fseek 7、fputs 8、fgets 9、fwrite 10、fread 11、fprintf 12、fscanf …
阅读更多...
【Redis】数据结构篇

【Redis】数据结构篇

文章目录 键值对数据库是怎么实现的&#xff1f;动态字符串SDSC 语言字符串的缺陷SDS结构设计 整数集合整数集合结构设计整数集合的升级操作 哈希表哈希表结构设计哈希冲突链式哈希Rehash渐进式rehashrehash触发条件 压缩列表压缩列表结构设计连续更新压缩列表的缺陷 quicklist…
阅读更多...
【Material-UI】Checkbox组件：Indeterminate状态详解

【Material-UI】Checkbox组件：Indeterminate状态详解

文章目录 一、什么是Indeterminate状态&#xff1f;二、Indeterminate状态的实现1. 基本用法示例2. 代码解析3. Indeterminate状态的应用场景 三、Indeterminate状态的UI与可访问性1. 无障碍设计2. 用户体验优化 四、Indeterminate状态的最佳实践1. 状态同步2. 优化性能3. 提供…
阅读更多...
ubuntu20.04 环境搭建教程

ubuntu20.04 环境搭建教程

1&#xff1a; Ubuntu 版本说明 我使用版本为 ubuntu20.04 ->镜像文件网上下载最新版本 mirrors.huaweicloud.com/ubuntu-releases/20.04.6/ Ubuntu 其他说明 Ubuntu 安装的位置不建议放到 C 盘(除非你只有一个 C 盘) Ubuntu 需要 120G 的空间 2&#xff1…
阅读更多...
vue项目前端实现将table导出成excel功能2

vue项目前端实现将table导出成excel功能2

使用插件 xlsx、xlsx-style、file-saver 具体引入见文章&#xff1a;vue项目前端实现将table导出成excel功能1 方法一 exportExcelByData&#xff1a;将数据导出成excel&#xff0c;合并单元格需要另外设置 方法二 exportExcelByDom&#xff1a;将页面dom(el-table)导出成…
阅读更多...
媒体资讯视频数据采集-yt-dlp-python实际使用-下载视频

媒体资讯视频数据采集-yt-dlp-python实际使用-下载视频

对于视频二创等一些业务场景&#xff0c;可能要采集youtube等的相关媒体视频资源&#xff0c;使用[yt-dlp](https://github.com/yt-dlp/yt-dlp)是一个不错的选择&#xff0c;提供的命令比较丰富&#xff0c;场景比较全面yt-dlp 是一个用 Python 编写的命令行工具&#xff0c;主…
阅读更多...
Linux部署python3.0版本——及基本操作

Linux部署python3.0版本——及基本操作

&#xff08;一&#xff09;部署环境 首先查看列表&#xff0c;找到python3.0的包 yum list installed|grep python 如果没有&#xff0c;是因为yum源的问题&#xff0c;可部署阿里云镜像然后下载epel包&#xff0c;这里的内容可参考前面的阿里云镜像部署 然后进行下载 yum…
阅读更多...
React 用户点击某个元素后只执行一次操作

React 用户点击某个元素后只执行一次操作

React开发中经常会遇到需求&#xff1a;用户点击某个元素后只执行一次特定操作。比如&#xff0c;用户点击按钮后弹出提示框&#xff0c;但希望再次点击按钮不再触发提示框。针对这种需求&#xff0c;可以封装一个自定义Hooks来实现只允许点击一次的功能。 import {useCallbac…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023