☰

反応ネイティブマップクラスタリング 質問する

tag-icon • tag-icon react-native maps markerclusterer react-native-maps
反応ネイティブマップクラスタリング 質問する

私はReact-nativeアプリにマップを統合したいので、そのために「react-native-maps」ライブラリを使用しています。https://github.com/airbnb/react-native-mapsクラスタリングを使用したいのですが、それに関連する適切なドキュメントが見つかりません。マップをクラスタリングと統合する方法についてのドキュメントを見つける手助けをしてください。また、iOS と Android の両方のプラットフォームでクラスタリングを実装するのに最適なライブラリを教えてください。

ベストアンサー1

使用できますmapbox/supercluster レポ、 そして要点はここだReact Nativeにスーパークラスタを実装する方法を示します。これはもともとブラウザ/ノードアプリケーション用に開発されましたが、今でも簡単にnpm install使用できます（JavaScriptはどこでもJavaScriptです）。クラスタ化されたマーカーをMapViewに追加します（元々は共有されていましたここ):

<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>

警告から問題のreact-native-maps：

主な問題はパフォーマンスです。数百または数千のマーカーを表示する必要がある場合は、徹底的に最適化する必要があり、ここが非常に難しくなります。

react-native-mapsアクティブな矛盾する 広報この問題を解決するAndroidとiOSの両方でネイティブではありますが、マージを待機します。ただし、手動で実装することは可能です。

おすすめ記事