在RN中显示地图的最佳方式是什么?

Question

我目前正在使用native react与EXPO的原型应用程序，我需要显示一个地图。

我制作低成本原型地图的第一个想法是使用我在屏幕上显示的OpenStreetMap。

我现在有什么

为了做到这一点，我使用了一个WebView，其中显示了一个带有传单的html页面，这是功能性的，但它有很多缺点，特别是在导入本地文件方面。

所以我寻找另一个解决方案，我看到OSM，没有真正的另一个解决方案，所以我去了MapBox使用"官方"图书馆"@rnmapbox/maps"但它不适用于expo，尤其是expo go。

你有任何想法使用自定义标记等动态地图…

我正在考虑切换到mapbox，不再使用expo，或者如果你有更好的主意，我很感兴趣!

我尝试WebView与OSM，我看到了很多OSM地图库我尝试了react-native-map和很多库

Answer 1

您可以在博览会中使用native-map。两个应用程序都可以免费显示地图。如果您正在使用react-native-cli，那么地图框是一个不错的免费选择。它有方向，位置api和其他一些我用过的是免费的。

这里有一个你可以使用的简单代码。

<MapboxGL.MapView
style={{...StyleSheet.absoluteFillObject}}
zoomLevel={13}
centerCoordinate={[
location.coords.longitude,
location.coords.latitude,
]}
styleURL={MapboxGL.StyleURL.Street}
compassEnabled={false}
onPress={data =>
setMarketLocation({
longitude: data.geometry.coordinates[0],
latitude: data.geometry.coordinates[1],
})
}>
<MapboxGL.Camera
zoomLevel={13}
centerCoordinate={[
markerLocation.longitude,
markerLocation.latitude,
]}
animationMode={'flyTo'}
animationDuration={3000}
/>
<MapboxGL.PointAnnotation
id={'1212'}
coordinate={[markerLocation.longitude, markerLocation.latitude]}>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
}}>
<MaterialCommunityIcons
name="map-marker"
size={moderateScale(30)}
color={'#de0910'}
/>
</View>
</MapboxGL.PointAnnotation>
</MapboxGL.MapView>

另一个解决方案是，你可以使用react-native-maps，并使用mapbox的API来绘制路径、地点和其他功能，这些功能是在google地图中付费的。你必须做一些额外的工作来将这些数据映射到谷歌地图上。