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

wxml页面按钮

html 复制代码
<button bindtap="toggleLabel">Toggle Label</button>

js

javascript 复制代码
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就可以了,这个方法上面的代码完全可以按照你的来
    })
  });
},

默认显示

点击后隐藏

相关推荐
源码_V_saaskw6 小时前
JAVA国际版二手交易系统手机回收好物回收发布闲置商品系统源码支持APP+H5
java·开发语言·微信·智能手机·微信小程序·小程序
韩立学长7 小时前
【开题答辩实录分享】以《智慧校园勤工俭学信息管理系统的设计与实现》为例进行答辩实录分享
vue.js·spring boot·微信小程序
余道各努力,千里自同风10 小时前
小程序中获取元素节点
前端·小程序
笨笨狗吞噬者10 小时前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
00后程序员张10 小时前
iOS 26 开发者工具推荐,构建高效调试与性能优化工作流
android·ios·性能优化·小程序·uni-app·iphone·webview
计算机学姐11 小时前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
性野喜悲11 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
2501_9160088911 小时前
iOS 26 文件导出与数据分析,多工具组合下的开发者实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9160088911 小时前
iOS混淆实战用多工具组合把IPA加固做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview