React-native-maps 空白页只有谷歌徽标答案

【问题标题】：React-native-maps Blank page Only google logoReact-native-maps 空白页只有谷歌徽标
【发布时间】：2017-12-04 21:32:32
【问题描述】：

我已经尝试为 react-native 安装谷歌地图一周了，但仍然没有成功。我已经搜索并尝试了 react-native-maps github 问题中的解决方案，但仍然出现空白页。

我做什么：

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

在 Google 控制台 API -> 创建新项目 -> 启用 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,
  },
});

编辑：因为有人问我堆栈跟踪：Sample 1

【问题讨论】：

你刚刚泄露了你的 GOOGLE MAP API KEY 吗？
兄弟，如果您阅读此通知，您的谷歌地图 API 密钥仍然有效，请编辑问题：

标签： android google-maps react-native-android react-native-maps

【解决方案1】：

您能否提供一些堆栈跟踪信息，以便我们更好地了解您的问题？您的问题描述听起来像是您的手机未连接到互联网，这就是未呈现地图的原因。

无论如何，根据我过去的经验，这里有一些让react-native-maps 运行的提示。

首先，始终按照官方文档here 配置您的Android 应用。
确保通过控制台生成 Google Maps API 密钥。
检查您的react-native-maps 是否与您的react-native 版本兼容。
检查您的 android 构建工具版本。
如果您使用的是 Genymotion（旧版本）的 android 模拟器，请确保您包含 Google Play Services，否则 Map 将无法工作。
有效的互联网连接。确保您的手机或模拟器已连接以加载地图（iOS 在没有互联网访问的情况下也很好）。
始终将 latlong 对象注入到 initialRegion 属性中，以便地图知道要关注的位置。

【讨论】：

我在我的应用程序中使用 react-native-maps。我有同样的问题，没有显示地图，只显示谷歌徽标，检查了@Rex Low 提到的提示，但地图仍然只适用于 ios 应用程序，而不适用于 android。有什么可能的原因吗？
@DinukaSalwathura 过去几个月发生了很多事情。对于 Android，现在我们必须单独指定 google 组件版本才能正常工作。以下是您可能想要查看的一些提示：android-developers.googleblog.com/2018/05/…
我在 build.gradle 中将我的 play-services 更新为 15.0.0，但仍然没有地图。您还有其他解决方案吗？这将是一个很大的帮助！谢谢。
我的应用程序正常工作 :D 在 androidManifest.xml 中，api 键前后有两个空格。当空间删除地图工作！谢谢。
在我的 Android 平板电脑上遇到同样的问题（USB 调试），而它在我的 Android 模拟器中工作。阅读这个答案 - 事实证明，我忘记在我的平板电脑中激活 Wifi。

【解决方案2】：

对拥有空白地图视图且带有 Google 徽标的朋友的建议。我花了一整天的时间来解决这个问题。最后我意识到，地图确实可以工作，但在第一次运行时完全缩放。我以为这是空白页，但实际上它是空白区域:) 仅供参考

【讨论】：

如何设置初始缩放级别.??

【解决方案3】：

确保您在 Google 控制台中启用 API 密钥以使用 Maps SDK for Android，如果您希望 iOS 启用 Maps SDK for iOS

【讨论】：

【解决方案4】：

我花了一整天的时间尝试 google 提供的解决方案，但旧的元数据似乎对我不起作用，所以我在 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"/>

地图终于出现了。

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

转到Google Api Console。
在屏幕的左上角，就在Google Apis 徽标的右侧，您会看到您的项目名称，选择正确的项目名称，然后在项目名称下方，您会看到一个蓝色文本+ ENABLE APIS AND SERVICES .点击它。
在打开的网页中，向下滚动以找到 Maps SDK for Android。点击启用。

【讨论】：

效果很好。将geo 更改为maps.v2 是我的诀窍。

【解决方案5】：

为我工作。可能它也适合你。

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>

【讨论】：

【解决方案6】：

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

API 密钥不正确
Google 开发者控制台未启用相应的 API

我关注this article 创建 API 密钥并启用 API。它突然起作用了。以前它像你说的那样只显示谷歌标志。

【讨论】：

【解决方案7】：

经过一周的搜索和环顾，我通过从 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

【讨论】：

【解决方案8】：

我一直在努力应对 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 版本，这解决了构建时应用程序崩溃的问题：条目，“:CFBundleIdentifier”，不存在”。

【讨论】：

【解决方案9】：

我遇到了同样的问题。最后，我在将 minsdkVersion 设置为 18 后得到了它，之前是 19。这对我有用。

【讨论】：

【解决方案10】：

我花了好几天才弄明白。就我而言（Expo 项目），它缺少来自 Play 管理中心的 SHA-1 证书指纹。我那里只有世博会。

TL;DR

根据文档的deploying to play store 部分，我不得不添加另一个 SHA-1 证书指纹。不仅是来自expo fetch:android:hashes 命令输出的那个，还有来自Google Play Console -> Your App -> Release management -> App signing 的那个。

所以现在我有两条记录在我的：GCP Credentials -> 我的 Maps SDK for Android API 密钥 -> Restrict usage to your Android apps 部分，两者都有我的应用程序包名称。

【讨论】：

【解决方案11】：

我一直在尝试所有可能的解决方案，在我的情况下，应用程序在 Expo 中，问题在于 API KEY 的配置。

解决方案

在 Google Play Console 的 API Key 配置中，包含两个约束：

一个包含使用expo fetch: android: hashes生成的指纹

另一个包含使用keytool -list -v -keystore "% USERPROFILE% \. Android \ debug.keystore "-alias androiddebugkey -storepass android -keypass android生成的指纹

重要的是这两个限制具有相同的包名称

【讨论】：

【解决方案12】：

我遇到了同样的问题。但我在任何地方都找不到正确的解决方案。

我在退出 form expo 后遇到了这个问题。

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

如果此时可以看到地图，则完成了 50%。

就我而言，这是“包名称和 SHA-1 签名证书”的问题我已经运行了默认的，即

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

我为其他项目得到的结果（我认为）然后我转到项目目录 (project root\android\app) 中的我的应用程序文件夹，在那里我看到了“debug.keystore”文件。然后我跑了这个

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

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

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

【讨论】：

【解决方案13】：

去你的

Google 控制台开发者帐户
选择您的相应项目

安卓

为 Android 启用 Maps SDK

iOS

为 iOS 启用 Maps SDK

【讨论】：