地图使用本机反应呈现灰色

Posted 2023-05-07

【中文标题】地图使用本机反应呈现灰色

【英文标题】：Map is rendering gray using react native

【发布时间】：2021-11-20 00:37:35

【问题描述】：

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

我的代码：

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'

我得到了这个错误：

但我的主要问题是第一张图片没有显示地图（或显示为灰色）。

【参考方案1】：

你需要在app/build.gradle上将插件部分改成如下：

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


apply plugin: "com.google.secrets_gradle_plugin"