时间戳

首页 > 解决方案 > 如何聚类除一个之外的所有标记

react-native - 如何聚类除一个之外的所有标记

问题描述

我正在使用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>

标签： react-nativereact-native-map-clustering

解决方案

您可以将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 不会导出具有已定义集群属性的Marker组件。将 cluster prop 应用于从 react-native-maps 导入的Marker将触发 ts 编译器错误，因此您需要定义自己的 Marker 类型或忽略此 ts 错误。

推荐阅读