react native maps clustering

问题:

I am new to react-native and I want to integrate maps in my app, I am using the “react-native-maps” library for that https://github.com/airbnb/react-native-maps I want to use clustering but I am unable to find proper documentations related to that. Please help me to find documentation of how to integrate maps with clustering and also tell which library is best for the implementation of clustering for both platforms, iOS and Android.

回答1:

You can use mapbox/supercluster repo, and here's a gist showing how to implements supercluster to React Native. It's initially developed for browser/node applications but you can still simply npm install and use it (javascript is javascript everywhere). Add the clustered markers into your MapView (originally shared here):

<MapView ref={ref => { this.map = ref; }}>
  { this.state.markers.map((marker, index) => {
    return (
      <MapView.Marker 
        coordinate={{ latitude: marker.geometry.coordinates[1], longitude: marker.geometry.coordinates[0] }}
        onPress={() => this.markerPressed(marker)}>
        <Marker model={place} active={this.isSelected(place)} />
      </MapView.Marker>
    );
  })}
</MapView>

Warning from an issue of react-native-maps:

The major issue is performance, if you need to display hundreds or thousands of markers you're gonna have to optimize the hell out of it, and this is where it gets really hard.

react-native-maps also have an active conflicting PR which solves this issue both in Android and iOS natively, but it waits for a merge. However, you can manually implement it.

回答2:

You can use react-native-maps-super-cluster. This module wraps AirBnB's react-native-maps and uses MapBox's SuperCluster as clustering engine. This module is super easy to use.

Demo