反应本机地图聚类 [英] react native maps clustering
问题描述
我想将地图集成到我的react-native应用程序中,为此我使用了"react-native-maps"库 https://github.com/airbnb/react-native-maps 我想使用群集,但是找不到与此相关的适当文档. 请帮助我找到有关如何将地图与群集集成的文档,并告诉我哪个库最适合在iOS和Android两个平台上实施群集.
I want to integrate maps in my react-native 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.
推荐答案
您可以使用mapbox/supercluster
存储库,并这是要点,展示了如何实现对React Native的超级集群.它最初是为浏览器/节点应用程序开发的,但您仍然可以简单地npm install
并使用它(javascript到处都是javascript).将群集标记添加到您的MapView中(最初在此处共享) ):
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>
来自问题的
警告 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
也有活跃的冲突 PR 可以在Android和iOS 中本机解决此问题,但需要等待合并.但是,您可以手动实现它.
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.
这篇关于反应本机地图聚类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!