uniapp map组件自定义markers标记点
需求是根据后端返回数据在地图上显示标记点,并且根据数据状态控制标记点颜色,标记点背景通过两张图片实现控制

<mapstyle="width: 100vw; height: 100vh;":markers="markers":longitude="locaInfo.longitude":latitude="locaInfo.latitude"@markertap="markerClick"@callouttap='callouttap'><!-- 使用callout进行自定义 --><cover-view slot="callout"><template v-for="(item,index) in markers"> <cover-view style="position: relative; width: 100%;padding-right: 20px;":marker-id="item.id":key='index'><cover-view class="marker-box" style="padding: 5px 5px 12px 5px;"><cover-image class="position-absolute" style="margin-right: 5px; width: 30rpx; height: 30rpx;" :src="item.options.img"></cover-image><cover-view>{{item.options.labelName}}</cover-view><cover-image class="position-absolute" style="position: absolute; left: 0;top: 0; z-index: -1; width: 100%; height: 100%;" :src="item.options.isStore?item.options.active_bg:item.options.bg"></cover-image></cover-view><cover-view style="position: absolute; right: 0px; top: 50%; transform: translateY(-65%); z-index: 2 ; width: 16px; height: 16px; border-radius: 50%; background-color: aquamarine;"></cover-view></cover-view></template></cover-view>
</map>
<script>export default {data() {return {storeIndex:0,locaInfo: {longitude:120.445172,latitude:36.111387},markers: [ // 标点列表{id: 1, //标记点idindex: 0,clusterId: 1, //自定义点聚合簇效果时使用latitude: 36.116874, // 纬度longitude: 120.441515, // 经度iconPath: '/static/tm.png', options: {isStore: true,img: '/static/store.png', bg: '/static/1.png',active_bg: '/static/2.png',labelName: '恩豪斯',name: '建材城名称(蓝鳌路店)',address: '高新区大学路101号',time1: '2024-02-28 16:30'},// 自定义窗口customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS" // 常显}},{id: 2, //标记点idindex: 1,clusterId: 1, //自定义点聚合簇效果时使用latitude: 36.110543, // 纬度longitude: 120.454837, // 经度iconPath: '/static/tm.png', options: {isStore: false,img: '/static/store.png', bg: '/static/1.png',active_bg: '/static/2.png',labelName: '恩豪斯1111',name: '品牌名称(所属建材城)',address: '高新区大学路101号',time1: '2024-02-28 16:30',time2: '2024-02-28 16:30',},// 自定义窗口customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS" // 常显}},],}},methods: {callouttap(e){ // 点击气泡console.log(e.detail);}}}
</script>
<style lang="scss">// 地图标记点.marker-box {position: relative;display: flex;// align-items: center;justify-content: center;color: #fff;font-size: 28rpx;overflow: visible; }</style>
相关文章:
uniapp map组件自定义markers标记点
需求是根据后端返回数据在地图上显示标记点,并且根据数据状态控制标记点颜色,标记点背景通过两张图片实现控制 <mapstyle"width: 100vw; height: 100vh;":markers"markers":longitude"locaInfo.longitude":latitude&…...
Windows:批处理脚本学习
目录 一、第一个批处理文件 1. &&和 | | 2. | 和 & 二、变量 1.传参变量%name 2.初始化变量set命令 3.变量的使用 4.局部变量与全局变量 5.使用环境变量 6.扩充变量语法 三、注释REM和 :: 四:函数 1.定义函数 2.…...
Dav_笔记10:Using SQL Plan Management之4
SQL管理库 SQL管理库(SMB)是驻留在SYSAUX表空间中的数据字典的一部分。它存储语句日志,计划历史记录,SQL计划基准和SQL配置文件。为了允许每周清除未使用的计划和日志,SMB使用自动空间管理。 您还可以手动将计划添加到SMB以获取一组SQL语句。从Oracle Database 11g之前的…...
通过json传递请求参数,如何处理动态参数和接口依赖
嗨,大家好,我是兰若姐姐,今天给大家讲一下如何通过json传递请求参数,如何处理动态参数和接口依赖 1. 使用配置文件和模板 在 test_data.json 中,你可以使用一些占位符或模板变量,然后在运行测试之前&…...
[240727] Qt Creator 14 发布 | AMD 推迟 Ryzen 9000芯片发布
目录 Qt Creator 14 发布Qt Creator 14 版本发布,带来一系列新功能和改进终端用户可通过命令行方式查看此新闻终端用户可通过命令行方式安装软件: AMD 推迟 Ryzen 9000芯片发布 Qt Creator 14 发布 Qt Creator 14 版本发布,带来一系列新功能…...
PLSQL Developer工具查询数据,报错(动态性能表不可访问)
解决的问题: 解决方案: 在配置-首选项-选项,取消勾选“自动统计”,保存之后即可查询数据...
基于 HTML+ECharts 实现智慧交通数据可视化大屏(含源码)
构建智慧交通数据可视化大屏:基于 HTML 和 ECharts 的实现 随着城市化进程的加快,智慧交通系统已成为提升城市管理效率和居民生活质量的关键。通过数据可视化,交通管理部门可以实时监控交通流量、事故发生率、道路状况等关键指标,…...
探索 IT 领域的新宠儿:量子计算
目录 引言:从经典到量子的飞跃 量子计算的基本概念 量子计算的独特优势 量子计算的深度剖析 量子计算的最新进展 量子计算的行业应用前景 面临的挑战与未来展望 结语:迎接量子计算的新时代 引言:从经典到量子的飞跃 在信息技术飞速发…...
TSPNet代码分析
论文《Realigning Confidence with Temporal Saliency Information for Point-Level Weakly-Supervised Temporal Action Localization》的official code分析 论文解读 代码分析 先看看训练过程,执行main if __name__ == __main__:exp = Exp()if exp.config.mode == eval:…...
Ubuntu上安装anaconda创建虚拟环境(各种踩坑版)
之前都是在Windows桌面版进行深度学习的环境部署及训练,今天尝试了一下在Ubuntu上进行环境部署,踩了不少坑,提供一些解决办法给大家避雷。 目录 一、下载和安装anaconda 1. 下载 2. 安装 二、创建虚拟环境 一、下载和安装anaconda 1. …...
DC-5靶机通关
今天我们来学习DC-5靶机!!! 1.实验环境 攻击机:kali2023.2 靶机:DC-5 2.1扫描网段 2.2扫描端口 这里后面这俩端口有点似曾相识啊,在dc3里面好像见过,那咱们给这两个端口来个更详细的扫描&…...
AI学习记录 -使用react开发一个网页,对接chatgpt接口,附带一些英语的学习prompt
实现了如下功能(使用react实现,原创) 实现功能: 1、对接gpt35模型问答,并实现了流式传输(在java端) 2、在实际使用中,我们的问答历史会经常分享给他人,所以下图的 copy …...
MongoDB多数据源配置与切换
在MongoDB中配置和使用多数据源主要涉及以下几个步骤: 定义多个数据源的配置: 在应用程序的配置文件中,定义多个MongoDB的数据源,例如在Spring Boot中可以通过application.yml或application.properties文件进行配置。 创建多个Mo…...
Mongodb入门介绍
文章目录 1、Mongodb:NoSQL数据库,分布式的文档型数据库2、适合场景:3、不适合场景:4、概念5、总结 1、Mongodb:NoSQL数据库,分布式的文档型数据库 2、适合场景: 1、web网站数据存储ÿ…...
docker前端部署
挂载,把自己的目录位置,挂载到容器内的HTML...
指标体系建设的方法论
一、分析痛点 了解当前数仓侧与业务应用方对指标到不到、难使用的痛点及日常指标使用习惯,制定指标中心所需功能并设计指标中心样式。 二、指定指标规范 定义指标类型、指标使用方、确定指标域(这里是数据域)、指标要具备的属性(业务/技术口径、负责人、类型等)。 …...
乐鑫ESP32-H2设备联网芯片,集成多种安全功能方案,启明云端乐鑫代理商
在数字化浪潮的推动下,物联网正以前所未有的速度融入我们的日常生活。然而,随着设备的激增,安全问题也日益成为公众关注的焦点。 乐鑫ESP32-H2致力于为所有开发者提供高性价比的安全解决方案,这款芯片经过专门设计以集成多种安全…...
C++调用Java接口
一、配置Java环境 安装jdk,我这里使用jdk1.8 32位版本,下载地址:https://www.oracle.com/java/technologies/downloads/#java8-windows 下载安装后,设置环境变量: JAVA_HOME C:\Program Files (x86)\Java\jdk-1.…...
C# datetimePicker
1. 直接把控件拉到设计器中,此时不要调整控件的values属性,这样就可以 打开后每次默认显示当天日期。 2. 属性Format long长日期格式默认值short短日期格式Time时间格式custom自定义时间格式在customFormat这个属性设置,比如yyyy-MM-dd HH…...
AI有关的学习和python
一、基本概念 AIGC(AI Generated content AI 生成内容) AI生成的文本、代码、图片、音频、视频。都可以成为AIGC。 Generative AI(生成式AI)所生成的内容就是AIGC AI指代计算机人工智能,模仿人类的智能从而解决问题…...
零代码也能构建智能登录系统?Dify工作流让你告别繁琐的前端开发
零代码也能构建智能登录系统?Dify工作流让你告别繁琐的前端开发 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程,自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awes…...
Doris从入门到上天系列第六篇:Doris中修改表的操作
一:修改表使用 ALTER TABLE 命令可以对表进行修改,包括 partition 、rollup、schemachange、rename 和 index 五种。语法:ALTER TABLE [database.]table alter_clause1[, alter_clause2, ...];alter_clause 分为 partition 、rollup、schema …...
nli-distilroberta-base生产环境:金融风控中合同条款中立性识别实践
nli-distilroberta-base生产环境:金融风控中合同条款中立性识别实践 1. 项目背景与价值 在金融风控领域,合同条款的准确理解至关重要。传统人工审核方式效率低下且容易遗漏关键细节,而自然语言理解技术可以大幅提升审核效率和准确性。nli-d…...
Kettle错误处理实战:如何用表输出步骤捕获并存储ETL过程中的异常数据
Kettle错误处理实战:如何用表输出步骤捕获并存储ETL过程中的异常数据 在数据仓库和ETL(Extract, Transform, Load)流程中,错误处理是确保数据质量的关键环节。Kettle(现称Pentaho Data Integration)作为一款…...
别再只懂概念了!用JSEncrypt库5分钟搞定前端RSA密码加密实战
前端RSA加密实战:用JSEncrypt保护用户密码传输安全 1. 为什么前端需要加密? 在Web应用开发中,用户登录是最基础也最敏感的操作之一。传统表单提交直接将密码以明文形式发送到服务器,这在网络传输过程中存在被截获的风险。即使使…...
告别PS!用WPS宏批量改图片尺寸的隐藏技巧(附JSA API避坑指南)
告别PS!用WPS宏批量改图片尺寸的隐藏技巧(附JSA API避坑指南) 在电商运营、教育培训等日常工作中,批量处理图片是刚需。传统做法要么依赖Photoshop等专业软件(学习成本高),要么手动逐个调整&…...
GLM-OCR模型安装包制作:将模型与服务打包成可执行文件
GLM-OCR模型安装包制作:将模型与服务打包成可执行文件 你是不是也遇到过这样的情况?自己好不容易把一个AI模型跑起来了,效果也不错,想分享给同事或者朋友用用,结果对方光是配环境、装依赖就折腾了半天,最后…...
AMD显卡福音:实测ROCm7+PyTorch在Windows下跑ComfyUI,比WSL快了多少?
AMD显卡Windows原生AI绘图性能飞跃:ROCm 7与WSL实测对比 当AMD在2025年夏季悄然发布ROCm 7预览版时,很少有人预料到它会给Windows平台的AI绘图体验带来如此显著的改变。作为一名长期在WSL环境下使用AMD显卡进行Stable Diffusion工作的开发者,…...
鸣潮帧率优化指南:用WaveTools工具箱实现高流畅度游戏体验
鸣潮帧率优化指南:用WaveTools工具箱实现高流畅度游戏体验 【免费下载链接】WaveTools 🧰鸣潮工具箱 项目地址: https://gitcode.com/gh_mirrors/wa/WaveTools 还在为鸣潮游戏中的画面卡顿、帧率不稳定而困扰吗?想要在激烈的战斗中获得…...
STM32串口环形队列IAP固件更新方案
基于STM32串口环形队列的IAP实现方案1. 项目概述1.1 系统架构本方案实现了一种基于STM32F103C8T6微控制器的串口IAP(In-Application Programming)系统,采用环形队列缓冲机制解决有限SRAM空间下的固件更新问题。系统将64KB Flash空间划分为四个功能区域:B…...
