react-native-maps 0.27.1地图空白仅显谷歌logo和标记如何排查？

云上老周

2026-10-1

问题排查与解决方案

首先核对谷歌云控制台对应API密钥的访问限制
因为你另一个使用相同版本react-native-maps的项目可正常运行，说明API密钥本身、谷歌云计费状态均无异常，优先检查当前项目的包名、签名SHA1值是否在密钥的允许访问列表中，确认是否有人员误改了密钥的限制规则，或近期更换开发设备导致debug签名的SHA1发生变更。

补全MapView组件的provider配置
你当前的代码未显式指定地图提供商，react-native-maps在安卓端默认可能使用非谷歌的地图提供商，修改MapView代码如下：

// 顶部先导入PROVIDER_GOOGLE
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

// 组件中指定provider
<MapView
  provider={PROVIDER_GOOGLE}
  style={styles.map}
  initialRegion={this.state.region}>
  <Marker coordinate={this.state.region} pinColor="red" />
</MapView>

固定谷歌地图服务依赖版本
在项目android/build.gradle的ext块中追加谷歌地图服务版本配置，和你另一个正常运行的项目版本对齐即可，避免依赖自动拉取到异常版本：
```
ext {
    buildToolsVersion = "29.0.2"
    minSdkVersion = 21
    compileSdkVersion = 29
    targetSdkVersion = 29
    // 追加下面这行，版本可按需调整
    playServicesMapsVersion = "17.0.0"
}
```
清理缓存重新构建
按顺序执行以下操作清理所有缓存后重新打包：
1. 删除项目根目录的node_modules文件夹
2. 删除android/.gradle、android/app/build文件夹
3. 重新安装依赖：npm install
4. 清理安卓构建缓存：cd android && ./gradlew clean
5. 重新运行项目
查看运行时日志定位问题
如果以上操作均无效，可过滤logcat日志中Google Maps相关的报错信息，会有明确的错误原因提示（如权限拒绝、配额超限等），可直接对应处理。