react-native-maps-super-cluster自定义Marker添加及聚类失效求助

我明白你的困扰——直接在ClusteredMapView里加的自定义Marker没法被聚类，而且你还有上千个标记要处理。其实问题出在这个库的工作逻辑上：只有通过data属性传入、并由renderMarker渲染的标记，才会被纳入聚类体系，直接作为子组件写的Marker会被当成独立的地图元素，和聚类系统完全不挂钩。

下面是具体的修改步骤，帮你把自定义Marker纳入聚类：

1. 把所有标记数据统一放进data数组 #

首先，把你手动写的那三个标记，和原来的随机生成的标记一起，都放到state.pins数组里。每个标记需要包含必要的坐标信息，以及你自定义的属性（比如图片、标题、描述）：

// 先定义你的自定义标记数据
const customMarkers = [
  {
    id: 'marker-1',
    location: { latitude: 37.5299448479299, longitude: 126.837746714377 },
    image: require('../gudu6/GuduIcon1w100.png'),
    title: " 양천구 신월동 ",
    description: " 228-1 번지"
  },
  {
    id: 'marker-2',
    location: { latitude: 37.58758812498327, longitude: 127.03790040097465 },
    image: require('../gudu6/GuduIcon1w100.png'),
    title: " 동대문구 제기동 ",
    description: " 1212 번지"
  },
  {
    id: 'marker-3',
    location: { latitude: 37.579331071917416, longitude: 127.04206659725423 },
    image: require('../gudu6/GuduIcon1w100.png'),
    title: " 동대문구 제기동 ",
    description: " 652-1 번지"
  }
];

// 在componentDidMount里把自定义标记和随机标记合并
componentDidMount() {
  // 先加载随机标记，再合并自定义标记
  this.reload();
  this.setState(prevState => ({
    pins: [...prevState.pins, ...customMarkers]
  }));
}

2. 修改renderMarker渲染自定义样式 #

更新你的renderMarker方法，根据传入的pin数据渲染带自定义图片、标题的Marker：

renderMarker = (pin) => {
  // 如果是随机生成的标记没有image属性，可以做个判断
  const markerProps = pin.image 
    ? { image: pin.image } 
    : { pinColor: '#65bc46' }; // 给随机标记保留默认颜色

  return (
    <Marker
      identifier={`pin-${pin.id}`}
      key={pin.id}
      coordinate={pin.location}
      {...markerProps}
      title={pin.title}
      description={pin.description}
    />
  )
}

3. 移除ClusteredMapView内的直接子Marker #

把你原来写在ClusteredMapView里面的<Marker>标签全部删掉，只保留ClusteredMapView本身——因为这些子元素不会被聚类处理，现在所有标记都通过data和renderMarker来渲染了。

修改后的ClusteredMapView部分应该是这样：

<ClusteredMapView 
  style={{ flex: 1 }} 
  data={this.state.pins} 
  renderMarker={this.renderMarker} 
  renderCluster={this.renderCluster} 
  initialRegion={{ 
    latitude: italyCenterLatitude, 
    longitude: italyCenterLongitude, 
    latitudeDelta: 12, 
    longitudeDelta: 12 
  }}
/>

关于1000+标记的说明 #

不用担心标记数量的问题，react-native-maps-super-cluster本身就是为大数据量的标记聚类设计的，只要把所有标记都放进data数组，它会自动处理聚类逻辑，性能上是有保障的。

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