React Native使用react-native-maps只显示Logo问题

原创于 2023-06-13 18:13:11 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #javascript

React Native 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在项目中使用谷歌地图API时遇到的问题及解决步骤，包括申请API、配置AndroidManifest.xml、设置MapView组件以及在安卓模拟器上运行。问题在于国内网络需要翻墙才能正常调用谷歌地图服务，导致地图显示为空白。

由于项目需要，得使用海外地图，于是选择了谷歌地图

记录下踩坑记录：

1，首先需要申请谷歌地图API

2，在AndroidManifest.xml文件中配置api

3，在代码里面使用，记得给父级容器设置宽高

<View style={{width:300,height:300,backgroundColor:'pink'}}>
      <MapView
      style={{flex: 1}} 
      provider={PROVIDER_GOOGLE} 
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}
          title="Marker Title"
          description="Marker Description"
        />
      </MapView>
     
      </View>

4，在安卓模拟器上运行项目，地图显示一个logo，这表示正常调用了地图组件