反应原生地图聚类答案

【问题标题】：react native maps clustering反应原生地图聚类
【发布时间】：2023-03-04 10:28:01
【问题描述】：

我想在我的 react-native 应用程序中集成地图，为此我使用了“react-native-maps”库 https://github.com/airbnb/react-native-maps 我想使用集群，但我找不到与此相关的适当文档。请帮助我查找有关如何将地图与集群集成的文档，并告诉我哪个库最适合在 iOS 和 Android 这两个平台上实现集群。

【问题讨论】：

标签： react-native maps markerclusterer react-native-maps

【解决方案1】：

您可以使用 mapbox/supercluster repo 和 here's a gist 来展示如何实现超集群到 React Native。它最初是为浏览器/节点应用程序开发的，但您仍然可以简单地 npm install 并使用它（javascript 无处不在）。将集群标记添加到您的 MapView 中（最初共享 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>

警告来自issue 的react-native-maps：

主要问题是性能，如果您需要显示数百个或成千上万的标记你将不得不优化它，这就是它变得非常困难的地方。

react-native-maps 也有一个活跃的conflicting PR，它在 Android 和 iOS 本地解决了这个问题，但它等待合并。但是，您可以手动实现它。

【讨论】：

【解决方案2】：

您可以使用react-native-maps-super-cluster。该模块包装AirBnB's react-native-maps 并使用MapBox's SuperCluster 作为集群引擎。这个模块超级好用。

演示

还有一个用于聚类react-native-map-clustering 的库。

【讨论】：

【解决方案3】：

yarn add react-native-map-clustering

import {Marker} from 'react-native-maps';
import MapView from "react-native-map-clustering";


    const INITIAL_REGION = {
      latitude: 52.5,
      longitude: 19.2,
      latitudeDelta: 8.5,
      longitudeDelta: 8.5,
    };
    
    const App = () => (
      <MapView initialRegion={INITIAL_REGION} style={{ flex: 1 }}>
        <Marker coordinate={{ latitude: 52.4, longitude: 18.7 }} />
        <Marker coordinate={{ latitude: 52.1, longitude: 18.4 }} />
        <Marker coordinate={{ latitude: 52.6, longitude: 18.3 }} />
        <Marker coordinate={{ latitude: 51.6, longitude: 18.0 }} />
        <Marker coordinate={{ latitude: 53.1, longitude: 18.8 }} />
        <Marker coordinate={{ latitude: 52.9, longitude: 19.4 }} />
        <Marker coordinate={{ latitude: 52.2, longitude: 21 }} />
        <Marker coordinate={{ latitude: 52.4, longitude: 21 }} />
        <Marker coordinate={{ latitude: 51.8, longitude: 20 }} />
      </MapView>
    );

【讨论】：