React Native 在RN中显示Map的最佳方式是什么?

vsmadaxz  于 2023-04-07  发布在  React
关注(0)|答案(1)|浏览(276)

我目前正在一个原型应用程序在本机React与博览会,我需要显示一个Map。
我的第一个想法是制作一个低成本的Map原型,使用我在屏幕上显示的OpenStreetMap。
What I currently have
要做到这一点,我使用一个WebView,显示一个带有传单的HTML页面,这是功能性的,但它有很多缺点,特别是在导入本地文件方面。
所以我寻找另一种解决方案,我看到,与OSM,没有真正的另一种解决方案,所以我去MapBox使用“官方”库“@rnmapbox/maps”,但它不与博览会,特别是博览会去。
你有什么想法在React Native中使用带有自定义标记等的动态Map吗?
我正在考虑切换到mapbox,不再使用expo,或者如果你有更好的主意,我很感兴趣!
我尝试了WebView和OSM,我看到了很多OSM matplotlib ,我尝试了react-native-map和很多库

1bqhqjot

1bqhqjot1#

你可以在expo中使用react-native-maps。Map显示对两个应用程序都是免费的。如果你使用react-native-cli,Map框是免费的好选择。它有方向,地方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来绘制路径,地点和其他在谷歌Map中付费的功能。你必须做一些额外的工作来为谷歌Map绘制这些数据。

相关问题