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

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标记点

需求是根据后端返回数据在地图上显示标记点&#xff0c;并且根据数据状态控制标记点颜色&#xff0c;标记点背景通过两张图片实现控制 <mapstyle"width: 100vw; height: 100vh;":markers"markers":longitude"locaInfo.longitude":latitude&…...

Windows:批处理脚本学习

目录 一、第一个批处理文件 1. &&和 | | 2. | 和 & 二、变量 1.传参变量%name 2.初始化变量set命令 3.变量的使用 4.局部变量与全局变量 5.使用环境变量 6.扩充变量语法 三、注释REM和 &#xff1a;&#xff1a; 四&#xff1a;函数 1.定义函数 2.…...

Dav_笔记10:Using SQL Plan Management之4

SQL管理库 SQL管理库(SMB)是驻留在SYSAUX表空间中的数据字典的一部分。它存储语句日志,计划历史记录,SQL计划基准和SQL配置文件。为了允许每周清除未使用的计划和日志,SMB使用自动空间管理。 您还可以手动将计划添加到SMB以获取一组SQL语句。从Oracle Database 11g之前的…...

通过json传递请求参数,如何处理动态参数和接口依赖

嗨&#xff0c;大家好&#xff0c;我是兰若姐姐&#xff0c;今天给大家讲一下如何通过json传递请求参数&#xff0c;如何处理动态参数和接口依赖 1. 使用配置文件和模板 在 test_data.json 中&#xff0c;你可以使用一些占位符或模板变量&#xff0c;然后在运行测试之前&…...

[240727] Qt Creator 14 发布 | AMD 推迟 Ryzen 9000芯片发布

目录 Qt Creator 14 发布Qt Creator 14 版本发布&#xff0c;带来一系列新功能和改进终端用户可通过命令行方式查看此新闻终端用户可通过命令行方式安装软件&#xff1a; AMD 推迟 Ryzen 9000芯片发布 Qt Creator 14 发布 Qt Creator 14 版本发布&#xff0c;带来一系列新功能…...

PLSQL Developer工具查询数据,报错(动态性能表不可访问)

解决的问题&#xff1a; 解决方案&#xff1a; 在配置-首选项-选项&#xff0c;取消勾选“自动统计”&#xff0c;保存之后即可查询数据...

基于 HTML+ECharts 实现智慧交通数据可视化大屏(含源码)

构建智慧交通数据可视化大屏&#xff1a;基于 HTML 和 ECharts 的实现 随着城市化进程的加快&#xff0c;智慧交通系统已成为提升城市管理效率和居民生活质量的关键。通过数据可视化&#xff0c;交通管理部门可以实时监控交通流量、事故发生率、道路状况等关键指标&#xff0c;…...

探索 IT 领域的新宠儿:量子计算

目录 引言&#xff1a;从经典到量子的飞跃 量子计算的基本概念 量子计算的独特优势 量子计算的深度剖析 量子计算的最新进展 量子计算的行业应用前景 面临的挑战与未来展望 结语&#xff1a;迎接量子计算的新时代 引言&#xff1a;从经典到量子的飞跃 在信息技术飞速发…...

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桌面版进行深度学习的环境部署及训练&#xff0c;今天尝试了一下在Ubuntu上进行环境部署&#xff0c;踩了不少坑&#xff0c;提供一些解决办法给大家避雷。 目录 一、下载和安装anaconda 1. 下载 2. 安装 二、创建虚拟环境 一、下载和安装anaconda 1. …...

DC-5靶机通关

今天我们来学习DC-5靶机&#xff01;&#xff01;&#xff01; 1.实验环境 攻击机&#xff1a;kali2023.2 靶机&#xff1a;DC-5 2.1扫描网段 2.2扫描端口 这里后面这俩端口有点似曾相识啊&#xff0c;在dc3里面好像见过&#xff0c;那咱们给这两个端口来个更详细的扫描&…...

AI学习记录 -使用react开发一个网页,对接chatgpt接口,附带一些英语的学习prompt

实现了如下功能&#xff08;使用react实现&#xff0c;原创&#xff09; 实现功能&#xff1a; 1、对接gpt35模型问答&#xff0c;并实现了流式传输&#xff08;在java端&#xff09; 2、在实际使用中&#xff0c;我们的问答历史会经常分享给他人&#xff0c;所以下图的 copy …...

MongoDB多数据源配置与切换

在MongoDB中配置和使用多数据源主要涉及以下几个步骤&#xff1a; 定义多个数据源的配置&#xff1a; 在应用程序的配置文件中&#xff0c;定义多个MongoDB的数据源&#xff0c;例如在Spring Boot中可以通过application.yml或application.properties文件进行配置。 创建多个Mo…...

Mongodb入门介绍

文章目录 1、Mongodb&#xff1a;NoSQL数据库&#xff0c;分布式的文档型数据库2、适合场景&#xff1a;3、不适合场景&#xff1a;4、概念5、总结 1、Mongodb&#xff1a;NoSQL数据库&#xff0c;分布式的文档型数据库 2、适合场景&#xff1a; 1、web网站数据存储&#xff…...

docker前端部署

挂载&#xff0c;把自己的目录位置&#xff0c;挂载到容器内的HTML...

指标体系建设的方法论

一、分析痛点 了解当前数仓侧与业务应用方对指标到不到、难使用的痛点及日常指标使用习惯&#xff0c;制定指标中心所需功能并设计指标中心样式。 二、指定指标规范 定义指标类型、指标使用方、确定指标域(这里是数据域)、指标要具备的属性(业务/技术口径、负责人、类型等)。 …...

乐鑫ESP32-H2设备联网芯片,集成多种安全功能方案,启明云端乐鑫代理商

在数字化浪潮的推动下&#xff0c;物联网正以前所未有的速度融入我们的日常生活。然而&#xff0c;随着设备的激增&#xff0c;安全问题也日益成为公众关注的焦点。 乐鑫ESP32-H2致力于为所有开发者提供高性价比的安全解决方案&#xff0c;这款芯片经过专门设计以集成多种安全…...

C++调用Java接口

一、配置Java环境 安装jdk&#xff0c;我这里使用jdk1.8 32位版本&#xff0c;下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/#java8-windows 下载安装后&#xff0c;设置环境变量&#xff1a; JAVA_HOME C:\Program Files (x86)\Java\jdk-1.…...

C# datetimePicker

1. 直接把控件拉到设计器中&#xff0c;此时不要调整控件的values属性&#xff0c;这样就可以 打开后每次默认显示当天日期。 2. 属性Format long长日期格式默认值short短日期格式Time时间格式custom自定义时间格式在customFormat这个属性设置&#xff0c;比如yyyy-MM-dd HH…...

AI有关的学习和python

一、基本概念 AIGC&#xff08;AI Generated content AI 生成内容&#xff09; AI生成的文本、代码、图片、音频、视频。都可以成为AIGC。 Generative AI&#xff08;生成式AI&#xff09;所生成的内容就是AIGC AI指代计算机人工智能&#xff0c;模仿人类的智能从而解决问题…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念&#xff0c;确保一个租户&#xff08;在这个系统中可能是一个公司或一个独立的客户&#xff09;的数据对其他租户是不可见的。在 RuoYi 框架&#xff08;您当前项目所使用的基础框架&#xff09;中&#xff0c;这通常是通过在数据表中增加一个…...