网站首页 > 开源技术 正文
效果图:
思路:通过后端的接口数据循环遍历出点的经纬度、弹窗信息,依次push进一个空的数组,最后将这个数组赋值给data里面定义的变量。
话不多说上代码:
HTML
<el-amap-marker
v-for="marker in markers"
:key="marker.index"
:position="marker.position"
:events="marker.events"
></el-amap-marker>
<el-amap-info-window
v-if="window"
:position="window.position"
:visible="window.visible"
:content="window.content"
></el-amap-info-window>
JS
data() {
lonlat: [], //经纬度
markers: [], //点
windows: [], //弹窗
window: "", //弹窗的显示影藏
},
mounted(){
let markers = [];
let windows = [];
let self = this; //this重定向
for (let i = 0; i < self.lonlat.length; i++) {
windows.push({
position: this.lonlat[i],
content:'',
visible: false,
});
//点
markers.push({
position: this.lonlat[i],
events: {
click() {
//弹窗信息
self.windows[i].content =
`<div>
<div><span>机构名称:</span>${self.name[i]}</div>
<div><span>管辖区域:</span>${self.areaName[i]}</div>
<div><span>地址:</span>${self.address[i]}</div>
<div><span>联系电话:</span>${self.phone[i]}</div>
<div><span>联系人:</span>${self.contactName[i]}</div>
<div><span>状态:</span>${self.useFlag[i]}</div>
</div>`;
//给信息窗体里的判断默认传false默认不显示
self.windows.forEach((window) => {
window.visible = false;
});
//当前点击的圆点对应的信息窗体为true显示
self.window = self.windows[i];
self.$nextTick(() => {
self.window.visible = true;
});
},
},
});
}
this.markers = markers;
this.windows = windows;
}
没了,结束了,是不是很简单呐,如有错误,欢迎留言.如有问题,不吝赐教。
如果此篇博文对您有帮助,还请动动小手点赞 收藏 ?留言 呐~,谢谢 ~ ~
- 上一篇: vue使用高德地图搭建实时公交系统
- 下一篇: Vue电商项目-商品飞入购物车特效实现
猜你喜欢
- 2024-10-06 高德地图AMap is not defined解决
- 2024-10-06 「分享」我在阿里总结了5条高效工作经验
- 2024-10-06 Vue 前端开发——打印功能实现(vue打印console)
- 2024-10-06 教你Vue3 Compiler 优化细节,如何手写高性能渲染函数(下)
- 2024-10-06 Vue3.0权限管理实现流程【实践】(vue权限控制思路)
- 2024-10-06 手把手教你Electron + Vue实战教程(三)
- 2024-10-06 让Jenkins自动部署你的Vue项目「实践」
- 2024-10-06 Vue 前端开发——导入Excel/Csv(vue导入导出)
- 2024-10-06 1.1万字深入细品Vue3.0源码响应式系统笔记「上」
- 2024-10-06 Vue+Node+高德地图+Echart做一款出行可视化全栈webapp
你 发表评论:
欢迎- 最近发表
-
- 后端服务太慢?试试这 7 招(后端 服务端 区别)
- 做一个适合二次开发的低代码平台,把程序员从curd中解脱出来-1
- Caffeine缓存 最快缓存 内存缓存(caffeine缓存使用)
- Java性能优化的10大策略(java性能调优从哪几个方面入手)
- New Balance M576PGT 全新配色设计
- x-cmd pkg | qrencode - 二维码生成工具
- 平和精英抽奖概率是多少 平和精英抽奖物品一览
- x-cmd pkg | tmux - 开源终端多路复用器(terminal multiplexer)
- 漫威官方App中文版上线:全站漫画限时免费
- macOS Monterey 12.7.4 (21H1123) 正式版发布,ISO、IPSW、PKG 下载
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)