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

wxml页面按钮

html 复制代码

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

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

默认显示

点击后隐藏