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

Question

我有一组标记，我想在 React Google 地图上可见或不可见。

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

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

对前进的道路有什么建议吗？

Answer 1

Google Maps 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;
}

笔记：

• google.maps.MVCObject类 - 用于存储图层(标记(组
• 图层可见性通过MVCObject.set方法切换

这是一个演示