React-native-maps 仅空白页 google 徽标

Question

我已经尝试为 react-native 安装 google 地图一个星期了，但仍然没有成功。我已经搜索并尝试了 react-native-maps github 问题中的解决方案，但我仍然得到一个空白页面。

我的工作：

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

在 Google 控制台 APIs -> 创建新项目 -> 启用 Google 地图 Android API, Google 地图 JavaScript API 和地点 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

Answer 1

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

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

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

Answer 2

我一直在努力处理 Android 和 iOS 平台上的 React Native 地图。

在 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”不存在。

Answer 3

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

Answer 4

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

Answer 5

确保在 Google 控制台中启用 API 键以与 Maps SDK for Android 一起使用，如果要 iOS 启用 Maps SDK for iOS

Answer 6

为我工作。可能对你也有用。

1) 移除容器样式和视图。使用下面的代码

 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>

Answer 7

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

API 密钥不正确
对应的API在Google开发者控制台中没有启用

我按照 this article 创建了 API 密钥并启用了 API。它突然起作用了。以前它像你说的那样只显示 Google 徽标。

Answer 8

我花了几天时间才弄明白这一点。就我而言（Expo 项目），它缺少 SHA-1 证书指纹，来自 Play 控制台的指纹。我那里只有世博会的一个。

TL;DR

根据deploying to play store part of the documentation, I had to add another SHA-1 certificate fingerprint. Not only the one from expo fetch:android:hashes command output, but also the one from Google Play Console -> 你的应用 -> 版本管理 -> 应用签名。

所以现在我有两条记录：GCP Credentials -> 我的 Maps SDK for Android API key -> 限制使用您的 Android 应用程序 部分，两者都带有我的应用程序包名称。

Answer 9

我花了一整天的时间尝试 google 中提供的解决方案，但遗留 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"/>

地图终于出现了。

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

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

Answer 10

我一直在尝试所有可能的解决方案，在我的例子中，应用程序在 Expo 中，问题出在 API KEY 的配置上。

解决方案

在 API Play Console 的 API 关键配置中，包括两个约束：

一个包含使用expo fetch: android: hashes

生成的指纹

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

生成的指纹

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

Answer 11

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

Answer 12

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

我在弹出 expo 表单后遇到了这个问题。

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

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

在我的例子中，问题出在“包名和 SHA-1 签名证书” 我有运行个默认值，即

"keytool -list -v -keystore "%USERPROFILE%.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android" =10=]
我为其他项目得到的结果（我认为）然后我转到项目目录 (project root\android\app) 中的应用程序文件夹，在那里我看到了“debug.keystore”文件。然后我运行这个

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

我得到了不同的结果。我申请了限制，对我有用。

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

Answer 13

转到您的

Google 控制台开发者帐户
Select你各自的项目

Android

为 Android

iOS

为 iOS

React-native-maps 仅空白页 google 徽标

React-native-maps Blank page Only google logo

android

google-maps

react-native-android

react-native-maps