反应原生地图聚类

问题描述 投票:16回答:2

我是新来的反应本机,我想在我的应用程序中集成地图,我正在使用“react-native-maps”库为我想要使用群集的https://github.com/airbnb/react-native-maps,但我无法找到与此相关的正确文档。请帮助我找到如何将地图与群集集成的文档,并告诉哪个库最适合实现两个平台,iOS和Android的群集。

react-native maps markerclusterer
2个回答
7
投票

你可以使用mapbox/supercluster repohere's a gist来展示如何为React Native实现超级集群。它最初是为浏览器/节点应用程序开发的,但你仍然只需要npm install并使用它(javascript到处都是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>

来自issuereact-native-maps的警告:

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

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


0
投票

你可以使用react-native-maps-super-cluster。这个模块包装AirBnB's react-native-maps并使用MapBox's SuperCluster作为集群引擎。该模块非常易于使用。

Demo

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.