微信小程序中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就可以了,这个方法上面的代码完全可以按照你的来
    })
  });
},

默认显示

点击后隐藏

相关推荐
2501_9159214321 分钟前
iOS 应用加固与苹果软件混淆全解析 IPA 文件防反编译、混淆加密与无源码加固策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2401_8854055122 分钟前
定位守护童年,科技构筑安全屏障
科技·物联网·安全·小程序·宠物·web app·智能手表
lvchaoq1 小时前
记录小程序真机bug,而模拟器无法复现
小程序·bug
2501_916007473 小时前
iOS 代上架实战指南,从账号管理到使用 开心上架 上传IPA的完整流程
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918414 小时前
iOS混淆与IPA文件加固深度解析,从反编译风险到苹果应用安全工程实践
android·macos·ios·小程序·uni-app·cocoa·iphone
毛毛三由15 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
qtkj669915 小时前
上门养老小程序源码 uniapp PHP MySQL
小程序·宠物
三翼鸟数字化技术团队16 小时前
本地开发环境获取远程App端环境-研发提效小技巧
websocket·微信小程序
知识分享小能手18 小时前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
不太会写21 小时前
又开始了 小程序定制
vue.js·spring boot·python·小程序