Reactjs 使用图层或其他分组方法显示/隐藏标记组

我有一组标记，我想让它们在谷歌地图上可见或不可见

在ESRI/ArcGIS地图中，您可以创建可以打开或关闭的图层，但Google地图中似乎没有任何等效功能

我想可以给标记一个特定的类，并打开或关闭它们的可见性，但我担心这可能会影响性能

---

有什么建议吗？

谷歌地图API不支持这种自定义图层（请参阅支持的图层列表）。 以下自定义组件演示如何对标记进行分组并切换其可见性

function MarkersGroup(props, context) {
  const layersRef = useRef(null);

  useEffect(() => {
    const map = context[MAP];
    let layers = null;
    if (!layersRef.current) {
      layers = new window.google.maps.MVCObject();
      for (let name in props.groupData) {
        for (let item of props.groupData[name].items) {
          const markerProps = { position: { lat: item.lat, lng: item.lng } };
          const marker = new window.google.maps.Marker(markerProps);
          marker.bindTo("map", layers, name);
        }
      }
      layersRef.current = layers;
    } else layers = layersRef.current;

    for (let name in props.groupData) {
      if (props.groupData[name].visible) {
        layers.set(name, map);
      } else {
        layers.set(name, null);
      }
    }
  });

  return null;
}

注:

• -用于存储图层（标记）组
• 图层可见性通过以下方式进行切换：