微信小程序中Map组件Marker中把Label文字信息通过按钮显示或隐藏

news2025/1/10 22:11:07

wxml页面按钮

<button bindtap="toggleLabel">Toggle Label</button>

js

data:{
	labelMarkerId: null  // 记录当前显示文本的标记的 id
},
//按钮切换显示
toggleLabel() {
  // 判断当前是否有显示的文本标记
  if (this.data.labelMarkerId !== null) {
    // 如果有,移除文本标记
    this.removeLabel();
  } else {
    let res = {
      latitude: this.data.lat,
      longitude: this.data.lng
    }
    this.getBallCourtInfoByPoint(res)
  }
},
//删除标注的字体
removeLabel() {
  const markers = this.data.markers.map(marker => {
    // 移除所有标记的文本信息
    delete marker.label;
    return marker;
  });

  this.setData({
    markers: markers,
    labelMarkerId: null
  });
},
//显示标注的字体 (我这里是请求数据,重新加载的label,反正只需要后面把labelMarkerId随便设置不为null就可以了)
getBallCourtInfoByPoint(res) {
  let that = this
  that.setData({
    markers: [],
    markersCut: []
  })
  let currentV = 9999
  if (this.data.currentValueShow != '不限距离') {
    currentV = that.data.currentValue * 1000
  }
  getBallCourtInfoByPoint(res.latitude, res.longitude,Number(currentV),2).then((res) => {
    res.forEach(element => {
      element['id'] = Number(element.id)
      element['markerId'] = Number(element.id)
      element['title'] = element.ballCourtName
      element['latitude'] = Number(element.lat)
      element['longitude'] = Number(element.lng)
      element['lat'] = Number(element.lat)
      element['lng'] = Number(element.lng)
      if (element.freeStatus === 0) {
        element['iconPath'] = "/images/cg.png"
        element['width'] = 45
        element['height'] = 45
        let label =  {
          content: '这里是文本\n哈哈',
          bgColor: '#FFF',
          fontSize: 12,
          borderRadius:10,
          anchorX: -40,
          anchorY: -3,
          padding: 5,
          hidden:false
        }
        element['label'] = label
      }else{
        element['iconPath'] = "/images/mfcg.png"
        element['width'] = 40
        element['height'] = 40
        let label =  {
          content: '这里是文本\n哈哈',
          bgColor: '#FFF',
          fontSize: 12,
          borderRadius:10,
          anchorX: -40,
          anchorY: -3,
          padding: 5
        }
        element['label'] = label
      }
      element['status'] = 1
    });
    that.setData({
      markers: res,
      markersCut: res,
      labelMarkerId: 0 //主要看这个,把这个设置成不为null就可以了,这个方法上面的代码完全可以按照你的来
    })
  });
},

默认显示
在这里插入图片描述
点击后隐藏

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot+vue+mybatis校园闲置品交换平台+PPT+论文+讲解+售后

校园闲置品交换平台是校园闲置品交换平台必不可少的一个部分。在校园闲置品交换平台的整个过程中&#xff0c;校园闲置品交换平台担负着最重要的角色。为满足如今日益复杂的管理需求&#xff0c;各类校园闲置品交换平台管理程序也在不断改进。本课题所设计的校园闲置品交换平台…

思维+01背包,LeetCode LCP 47. 入场安检

一、题目 1、题目描述 「力扣挑战赛」 的入场仪式马上就要开始了&#xff0c;由于安保工作的需要&#xff0c;设置了可容纳人数总和为 M 的 N 个安检室&#xff0c;capacities[i] 记录第 i 个安检室可容纳人数。安检室拥有两种类型&#xff1a; 先进先出&#xff1a;在安检室中…

基于 PyTorch 的模型瘦身三部曲:量化、剪枝和蒸馏,让模型更短小精悍!

基于 PyTorch 的模型量化、剪枝和蒸馏 1. 模型量化1.1 原理介绍1.2 PyTorch 实现 2. 模型剪枝2.1 原理介绍2.2 PyTorch 实现 3. 模型蒸馏3.1 原理介绍3.2 PyTorch 实现 参考文献 1. 模型量化 1.1 原理介绍 模型量化是将模型参数从高精度&#xff08;通常是 float32&#xff0…

go语言Gin框架的学习路线(九)

GORM的CRUD教程 CRUD 是 "Create, Read, Update, Delete"&#xff08;创建、读取、更新、删除&#xff09;的缩写&#xff0c;代表了数据库操作的基本功能。在 GORM 的上下文中&#xff0c;CRUD 指的是使用 GORM 库来执行这些基本的数据库操作。 创建的 在 GORM 中…

第5讲:Sysmac Studio中的硬件拓扑

Sysmac Studio软件概述 一、创建项目 在打开的软件中选择新建工程 然后在工程属性中输入工程名称,作者,类型选择“标准工程”即可。 在选择设备处,类型选择“控制器”。 在版本处,可以在NJ控制器的硬件右侧标签处找到这样一个版本号。 我们今天用到的是1.40,所以在软…

DB-GPT:LLM应用的集大成者

整体架构 架构解读 可以看到&#xff0c;DB-GPT把架构抽象为7层&#xff0c;自下而上分别为&#xff1a; 运行环境&#xff1a;支持本地/云端&单机/分布式等部署方式。顺便一提&#xff0c;RAY是蚂蚁深度参与的一个开源项目&#xff0c;所以对RAY功能的支持应该非常完善。…

Hadoop、HDFS、MapReduce 大数据解决方案

本心、输入输出、结果 文章目录 Hadoop、HDFS、MapReduce 大数据解决方案前言HadoopHadoop 主要组件的Web UI端口和一些基本信息MapReduceMapReduce的核心思想MapReduce的工作流程MapReduce的优缺点Hadoop、HDFS、MapReduce 大数据解决方案 编辑 | 简简单单 Online zuozuo 地址…

从输入 URL 到页面展示到底发生了什么

从输入 URL 到页面展示到底发生了什么呢&#xff1f; 1.在浏览器输入一个域名回车 2.首先会先检查浏览器缓存里是否有缓存资源&#xff0c;如果缓存中有&#xff0c;会直接在浏览器上显示页面内容&#xff0c;如果没有&#xff0c;在发送http请求之前&#xff0c;浏览器会向D…

基于FPGA的以太网设计(2)----以太网的硬件架构(MAC+PHY)

1、概述 以太网的电路架构一般由MAC、PHY、变压器、RJ45和传输介质组成,示意图如下所示: 需要注意的是,上图是一个简化了的模型,它描述的是两台主机之间的直接连接,但在实际应用中基本都是多台主机构成的局域网,它们之间并不直接相连,而是通过交换机Switch来进行…

跟代码执行流程,读Megatron源码(四)megatron训练脚本initialize.py之initialize_megatron()分布式环境初始化

在前文中&#xff0c;我们讲述了pretrain函数的执行流程&#xff0c;其首要步骤是megatron分组的初始化与环境的配置。本文将深入initialize_megatron函数源码&#xff0c;剖析其初始化分布式训练环境的内部机制。 注&#xff1a;在此假设读者具备3D并行相关知识 一. initiali…

Linux基于CentOS7【yum】【vim】的基础学习,【普通用户提权】

目录 yum生态 什么是yum yum是如何得知目标服务器的地址和下载链接 vim vim模式 命名模式 光标移动 插入模式 i键插 a键插 o键插 底行模式 批量化注释 批量化去注释 创建vim配置文件 例子 高亮功能&#xff1a; 缩进功能&#xff1a; 符号位自动补齐功能…

软件缺陷(Bug)、禅道

目录 软件缺陷的判定标准 软件缺陷的核心内容 构成缺陷的基本要素 缺陷报告 缺陷管理 缺陷的跟踪流程 项目管理工具--禅道 软件在使用过程中存在的任何问题&#xff08;如&#xff1a;错误、异常等&#xff09;&#xff0c;都叫软件的缺陷&#xff0c;简称bug。 软件缺…

175道Docker面试题(上)

目录 1、什么是docker&#xff1f; 2、Docker与普通虚拟机的对比&#xff1a; 3、Docker常用命令&#xff1a; 4、Docker镜像是什么&#xff1f; 5、Docker容器是什么&#xff1f; 6、Docker容器有几种状态&#xff1f; 7、Dockerfile中最常见的指令是什么&#xff1f; …

v-for 进行列表的 增删改查

通过对象下标替换属性值 但是通过实践此方法是错误的&#xff0c;Vue监听的是students这个对象&#xff0c;而不是这个对象里面的数组信息&#xff0c;也就是说&#xff0c;改变里面的值&#xff0c;并不能在页面上实现更新的功能 <!DOCTYPE html> <html lang"en…

windows系统conda 使用注意事项

在windows系统中&#xff0c;可以直接在Anaconda 的终端中使用conda功能。 但是&#xff0c;在Anaconda的终端中&#xff0c; 无法使用完整的命令行工具。 如设置环境变量的set命令就不起作用。 这时我们就想要在windows的cmd命令中直接使用conda。 但直接使用会有问题&#…

HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件: 概念: 由框架直接提供的称为 系统组件&#xff0c; 由开发者定义的称为 自定义组件。 源代码&#xff1a; Component struct MyCom { build() { Column() { Text(我是一个自定义组件) } } } Component struct MyHeader { build() { Row(…

Maven的常用命令(面试篇之Maven)

我在写项目时,使用Maven的插件的命令来进行打包等,却发现报错误了,虽然解决了, 但借此机会来总结一下Maven的常用命令: 这些插件都有着自己的命令,虽然,我们可以简化的使用一些idea中的方便的按键: 但 , 一个程序员的功力深浅就在这些细节末尾处: 在Maven中&#xff0c;插件是…

高职国培丨数据分析与数据挖掘课程实施能力提升培训班正式开班

7月15日&#xff0c;由广东机电职业技术学院牵头&#xff0c;广东泰迪智能科技股份有限公司作为合作单位的“高职教师数据分析与数据挖掘课程实施能力提升培训班&#xff08;高职国培&#xff09;”正式开班。来自广东省各地36位高校教师参与本次线下师资国培班。 广东机电职业…

el-menu根据多层树形结构递归遍历展示菜单栏

文章目录 前提条件假设菜单等级只有两个等级结果如下所示 但是如果菜单等级超过两个等级或者多个等级的话App.vueMenuItems.vue结果如下所示 关于遍历时图标前的展示后续完善关于点击路由跳转参考element plus的官网即可 前提条件 package.json如下所示&#xff0c;这是一个Vi…

广州邀请媒体宣传(附媒体名单)

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 广州地区 媒体邀约&#xff1a; 记者现场采访&#xff0c;电视台到场报道&#xff0c;展览展会宣传&#xff0c;广交会企业宣传&#xff0c;工厂探班&#xff0c;媒体专访等。 适合广州…