Google Maps中MarkerWithLabel无法隐藏的技术求助

嘿，这个问题我之前踩过坑！MarkerWithLabel作为Google Maps原生Marker的封装组件，它的隐藏逻辑和原生Marker不太一样，直接调用setVisible()可能不会同时处理标记和标签部分，导致看起来没生效。下面给你两种靠谱的解决方法：

方法一：确保使用最新版MarkerWithLabel并直接调用封装方法 #

如果你的MarkerWithLabel库是较新版本，它其实已经封装了setVisible()方法，会自动同步隐藏/显示内部的原生标记和标签元素。只要你存储到MarkerStore的是正确的MarkerWithLabel实例，直接调用就可以：

// 隐藏标记
MarkerStore[res[i].id].setVisible(false);
// 显示标记
MarkerStore[res[i].id].setVisible(true);

如果这方法没生效，大概率是你用的库版本太旧，建议更新到最新版。

方法二：手动操作内部的原生标记和标签元素 #

要是暂时没法更新库，或者更新后还是有问题，可以直接操作MarkerWithLabel实例内部的两个核心部分：原生Marker对象和标签DOM元素：

1. 创建MarkerWithLabel时的完整示例 #

// 创建带标签的标记
var marker = new MarkerWithLabel({
  position: new google.maps.LatLng(res[i].position.lat, res[i].position.long),
  title: '',
  map: map,
  icon: icon,
  labelContent: '这里是你的标签文本', // 必填：标签内容
  labelClass: 'custom-marker-label', // 可选：自定义标签样式的CSS类
  labelStyle: { fontSize: '14px', color: '#fff' } // 可选：行内样式
});
// 存入MarkerStore
MarkerStore[res[i].id] = marker;

2. 手动隐藏/显示的代码 #

// 隐藏指定ID的标记和标签
function hideTargetMarker(markerId) {
  const marker = MarkerStore[markerId];
  if (!marker) return;
  
  // 隐藏原生标记
  marker.marker.setVisible(false);
  // 隐藏标签DOM元素
  if (marker.label) {
    marker.label.style.display = 'none';
  }
}

// 显示指定ID的标记和标签
function showTargetMarker(markerId) {
  const marker = MarkerStore[markerId];
  if (!marker) return;
  
  marker.marker.setVisible(true);
  if (marker.label) {
    marker.label.style.display = 'block';
  }
}

这样就能同时把标记和标签都隐藏/显示了，不会出现只藏了标记但标签还留在地图上的情况。

内容的提问来源于stack exchange，提问作者moo moo