如何对除一个之外的所有标记进行聚类

Question

我正在使用react-native-map-clustering对谷歌地图上的标记进行聚类。除指示我的位置的一个标记外，所有标记都是动态的。当我缩小地图时，所有标记都会聚集在一起。但我想要这样的东西 这是我的实现：

<MapView
            layoutAnimationConf={LayoutAnimation.Presets.easeInEaseOut}
            animationEnabled={true}
            ref={mapRef}
            style={styles.map}
            provider={PROVIDER_GOOGLE}
            initialRegion={currentRegion}
            // region={currentRegion}
            clusteringEnabled={true}
            radius={70}
            customMapStyle={mapConfig}>
            <Marker coordinate={currentRegion} title={'my location'}>
                <Image
                    source={images.currentLocation}
                    style={{
                        height: 20,
                        width: 20,
                    }}
                />
            </Marker>
            {branchMarkers()}
        </MapView>

Answer 1

您可以将Marker 上的cluster属性设置为false，如下所示：

<Marker
  coordinate={coordinate}
  cluster={false}
  ...
/>
  <Image ... />
</Marker>

这将使该标记永久分散并在所有缩放级别的地图上可见，而不会影响其他群集。在内部，对于作为MapView子级的每个Marker，会在辅助函数中检查该Marker是否应包含在集群中，该函数检查此 prop 是否已被覆盖：

export const isMarker = (child) =>
  child &&
  child.props &&
  child.props.coordinate &&
  child.props.cluster !== false;

TypeScript 用户注意事项：

react-native-map-clustering 不会导出具有定义的cluster prop 的Marker组件。将 cluster prop 应用于从 react-native-maps 导入的Marker将触发 ts 编译器错误，因此您需要定义自己的 Marker 类型或忽略此 ts 错误。