React-native-maps空白页面只有Google标志

Question

我已经尝试安装React Native的谷歌地图组件一周，但仍未成功。我已经在React Native Maps的Github问题中搜索并尝试了解决方案，但页面仍然是空白的。

我的做法：

react-native init myapp
npm install
yarn add react-native-maps
react-native link react-native-maps

在Google Console APIs中 -> 创建新项目 -> 启用Google Maps Android API、Google Maps JavaScript API和Places API -> 创建凭据。

在AndroidManifest.xml文件中。

    <application>
....
       <meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="XXX"/>
    </application>

package.json

    {
    "name": "maps",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0",
        "react-native": "0.50.4",
        "react-native-maps": "^0.18.3"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps'

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <MapView
        style={styles.map}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
      </MapView>  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

编辑： 因为有人要求提供堆栈跟踪：示例1

- Стоил Янков

---

你刚刚泄露了你的谷歌地图API密钥吗？ - ucup

兄弟，如果你看到这个通知，请编辑问题，你的谷歌地图API密钥仍然有效。：< - ucup

Answer 1

能否提供一些堆栈跟踪，以便我们更好地了解您的问题？您的问题描述听起来像是您的手机没有连接到互联网，这就是为什么地图没有被渲染的原因。

无论如何，以下是一些基于我过去经验得出的有关如何运行react-native-maps的提示。

• 首先，根据官方文档here，始终配置您的Android应用程序。
• 确保通过控制台生成了Google Maps API密钥。
• 检查您的react-native-maps是否与您的react-native版本兼容。
• 检查您的android build-tools版本。
• 如果您正在使用来自Genymotion（旧版）的android模拟器，请确保包括Google Play服务，否则地图将无法工作。
• 激活互联网连接。 请确保您的电话或模拟器已连接，以便加载地图（iOS在没有互联网访问的情况下也可以工作）。
• 始终向initialRegion prop注入一个latlong对象，以便地图知道要聚焦在哪里。

- Rex Low

---

我在我的应用程序中使用react-native-maps。我遇到了同样的问题，地图没有显示，只显示谷歌标志，检查了@Rex Low提到的提示，但是地图仅在iOS应用程序中工作，而在Android中不起作用。有可能的原因是什么？ - Dinuka Salwathura

@DinukaSalwathura 过去几个月发生了很多事情。对于Android来说，现在我们必须单独指定谷歌组件的版本才能使事情正常工作。这里有一些你可能想要查看的提示：https://android-developers.googleblog.com/2018/05/announcing-new-sdk-versioning.html - Rex Low

我在build.gradle中将play-services更新到了15.0.0，但地图仍然无法显示。你有其他的解决方案吗？这将是一个很大的帮助！谢谢。 - Dinuka Salwathura

我的应用程序工作了 :D 在androidManifest.xml中，API密钥前后有两个空格。当去掉这些空格后，地图就可以正常工作了！谢谢。 - Dinuka Salwathura

在我的Android平板电脑上（USB调试）遇到了同样的问题，而在我的Android模拟器中却可以工作。阅读了这个答案 - 结果发现我忘记在平板电脑中激活Wifi了。 - user1702401

Answer 2

我花了整整一天的时间尝试谷歌上提供的解决方案，但遗留的 meta-data 对我似乎没有用，所以我更改了以下的行 AndroidManifest.xml

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="Your Google maps API Key Here"/>

到

<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="Your Google maps API Key Here"/>

最后地图出现了。

当然，在Google Api控制台中必须启用Maps SDK for Android。以下是为初学者启用Maps SDK for Android的步骤：

1. 前往Google Api控制台。

2. 在屏幕左上角，就在Google Apis标志的右侧，您会看到项目名称，请选择正确的项目名称，然后在项目名称下方，您会看到蓝色文本+启用API和服务。单击它。

3. 在打开的网页上，向下滚动以查找Maps SDK for Android。单击启用它。

- Mahdieh Shavandi

---

它运行得很好。将geo更改为maps.v2对我来说是个诀窍。 - Felix Htoo

Answer 3

请确保您在Google控制台中启用API密钥以使用Maps SDK for Android，如果您想要iOS版本，请启用Maps SDK for iOS

- teerryn

Answer 4

给朋友们的建议：如果你在使用谷歌地图时遇到了空白页面并且有谷歌标志，那你需要注意了。我花了一整天的时间来解决这个问题。最终我发现，地图其实是可以正常显示的，只是在第一次运行时默认进行了全局缩放。所以，虽然起初看上去是一片空白，但实际上它是完全缩放了的地图区域。

- yeulucay

---

如何设置初始缩放级别？ - Aman Deep

Answer 5

在大多数情况下，这与两个问题有关：

1. API密钥不正确
2. 在Google开发者控制台中未启用相应的API

我按照这篇文章的指示创建了API密钥并启用了API。然后它突然就起作用了。之前只会显示谷歌标志，就像你说的那样。

- Hari Das

Answer 6

经过一周的搜索和观察，我通过从Android项目目录生成SHA1指纹来解决了这个问题。

keytool -list -v -keystore /Users/username/ProjecFolder/android/app/debug.keystore  -alias androiddebugkey -storepass android -keypass android

替代

keytool -list -v -keystore ~/.android/debug.keystore  -alias androiddebugkey -storepass android -keypass android

- Hssikou Yassine

Answer 7

为我工作。可能对您也有帮助。

1）删除 containerStyle 和 View。使用以下代码：

 mapStyle: {
    height: 400,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },

2) 将mapView代码替换为

<MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={mapStyle}
      zoomEnabled={true}
      region={{
        latitude: 22.258,
        longitude: 71.19,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <Marker
        coordinate={{ latitude: 22.258, longitude: 71.19 }}
        title={"title"}
        description={"test"}
      icon={image}
      />
    </MapView>

- Pushp

Answer 8

我曾经在React Native Maps上遇到了困难，无论是在Android还是iOS平台上。

在Android上，有Google API版本。我尝试使用Google API 27，但不起作用，但API 26可以。 我在这里找到了这个提示：https://github.com/react-community/react-native-maps/issues/1877#issuecomment-353261669 在iOS上，有软件包版本： 当我使用CRNA创建应用程序时，它安装了react-native@0.52.0，而这与react-native-maps@0.20.1不兼容。 所以我将react-native更改为版本0.53.0，这解决了构建应用程序时崩溃的问题，并出现错误：“Entry,“：CFBundleIdentifier”不存在”。

- Kristijan Tomić

Answer 9

我曾面对相同的问题。最终，将minsdkVersion设置为之前的19，这对我起作用了。

- Khushboo Tahir

Answer 10

我遇到了同样的问题，但是我无法在任何地方找到正确的解决方案。

我在从Expo中退出后遇到了这个问题。

我的问题与地图密钥有关。我在Android Studio的日志中清楚地发现了这一点。然后我从Google的凭据管理中删除了所有限制。（将应用程序限制设置为无）

如果此时您可以看到地图，则已完成50％。

在我的情况下，问题出在“包名称和SHA-1签名证书”上。我运行了默认的命令：

"keytool -list -v -keystore“%USERPROFILE%.android\debug.keystore”-alias androiddebugkey -storepass android -keypass android"

这是我得到的结果（我认为是其他项目的结果）。然后我进入项目目录下的应用程序文件夹（项目根目录\android\app），在那里我看到了“debug.keystore”文件。然后我运行了以下命令：

keytool -list -v -keystore“debug.keystore”-alias androiddebugkey -storepass android -keypass android

我得到了不同的结果。我将其应用于限制，对我有效。

我认为这可能会对某些人有所帮助。

- mgms_kumara