地图使用 React Native 呈现灰色

Question

我正在 React Native 中做一个项目，我想使用 Google Maps API 放置地图。但我遇到一个问题，没有任何内容显示为图像（它是灰色的）。我查看了 Stackoverflow 上的几篇帖子，但无法解决我的问题。

我的代码：

import React from 'react';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import {StyleSheet, View} from 'react-native'; // remove PROVIDER_GOOGLE import if not using Google Maps

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default () => (
  <View style={styles.container}>
    <MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={styles.map}
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
    />
  </View>
);

在我的 local.properties 文件（在 android 的根目录中）中，我放置了我的凭据（出于测试目的，它是不受限制的）

MAPS_API_KEY=AIza...

我的build.gradle文件（在android根目录中）

buildscript {
    ext {
        buildToolsVersion = "29.0.3"
        playServicesVersion = "17.0.0"
        googlePlayServicesVersion = "11.8.0"
        androidMapsUtilsVersion = "0.5+"
    }
    dependencies {
        classpath "com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:1.3.0"
    }
}

我的应用程序/build.gradle：

android {
    defaultConfig {
        manifestPlaceholders = [MAPS_API_KEY: "$System.env.MAPS_API_KEY"]
    }
}

dependencies {
    implementation(project(':react-native-maps')){
       exclude group: 'com.google.android.gms', module: 'play-services-base'
       exclude group: 'com.google.android.gms', module: 'play-services-maps'
    }

    implementation 'com.google.android.gms:play-services-base:17.2.1'
    implementation 'com.google.android.gms:play-services-maps:17.0.1'
}

我的AndroidManifest.xml

<manifest ...>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

  <application ...>
    <uses-library android:name="org.apache.http.legacy"
                  android:required="false" />

    <meta-data android:name="com.google.android.gms.version"
               android:value="@integer/google_play_services_version" />

    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="${MAPS_API_KEY}" />
  </application>
</manifest>

我创建了 app/src/main/res/values/google_maps_api.xml

<resources>
    <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">AIza...</string>
</resources>

我尝试在 app/build.gradle 上添加这一行

plugins {
   id 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin'
}

我收到了这个错误：

但我的主要问题是没有显示地图（或以灰色显示），如第一张图像。

Answer 1

您需要将 app/build.gradle 上的插件部分更改为以下内容：

buildscript {
    dependencies {
         classpath "com.google:plugin:0.6.1"
    }
}

apply plugin: "com.google.secrets_gradle_plugin"

Answer 2

我解决了这个问题，输入此链接： https://console.cloud.google.com/apis/library/maps-android-backend.googleapis.com

然后，您需要启用 MAPS SDK FOR ANDROID： 另外，您必须确保添加 google api 密钥。

Answer 3

请检查google地图api是否有效？只需在邮递员上运行此端点 将“yourapikey”替换为您自己的 google 地图 api 密钥。

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=yourapikey