Question

我一直试图安装谷歌地图反应原生一周仍然没有成功。我已经搜索并尝试了react-native-maps github问题中的解决方案，但我仍然得到一个空白页面。

我的所作所为：

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

在Google控制台API中 - ＆gt;创建新项目 - ＆gt;启用Google Maps Android API，Google Maps JavaScript API和Places API - ＆gt;创建凭据

在AndroidManifest.xml中

    {
    "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"
    }
}

的package.json

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,
  },
});

App.js

newList

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

Answer 1

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

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

首先，请务必根据官方文档here配置您的Android应用。
确保通过控制台生成Google Maps API密钥。
检查您的react-native-maps是否与react-native版本兼容。
检查你的android build-tools版本。
如果您使用的是Genymotion（旧版）的Android模拟器，请确保包含Google Play服务，否则地图将无效。
有效的互联网连接。确保您的手机或模拟器已连接，以便加载地图（iOS无法访问互联网）。
始终将latlong对象注入initialRegion道具，以便地图知道应该关注的位置。

Answer 2

对具有空白地图视图且带有 Google徽标的朋友的建议。我一整天都在解决这个问题。最终，我意识到，地图实际上正在运行，但是在首次运行时完全缩放。我以为是空白页，但实际上是空白区域:) 仅供参考

Answer 3

我花了一整天的时间尝试使用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"/>

最后地图出现了。

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

转到Google Api Console。
，位于Google Apis徽标的右侧，您将看到您的项目名称，选择右侧的项目名称，然后在项目名称下方看到一个蓝色文字+ ENABLE APIS AND SERVICES。点击它。
在打开的网页中，向下滚动以找到Maps SDK for Android。单击以启用它。

Answer 4

经过一周的搜索和浏览后，我通过从android项目目录中生成SHA1指纹解决了这个问题

const startIndex = file.indexOf(startString) + startString.length;
const endIndex = file.indexOf(endString);
const between = file.slice(startIndex, endIndex);
console.log(between);

代替

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

Answer 5

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

Answer 6

请确保您已启用Google控制台中的API密钥以与Maps SDK for Android一起使用，并且如果要在iOS上启用Maps SDK for iOS

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>

Answer 8

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

API密钥不正确
未在Google开发人员控制台中启用相应的API

我跟随this article创建了API密钥并启用了api。而且它突然起作用了。在以前只显示您所说的Google徽标之前。

Answer 9

花了我几天的时间才弄清楚。在我的案例（Expo项目）中，它缺少 SHA-1证书指纹，这是Play控制台中的一个。我只有那一个世博会。

TL; DR

根据文档的deploying to play store部分，我不得不添加另一个SHA-1证书指纹。不仅来自expo fetch:android:hashes命令输出的一个，而且来自Google Play Console->您的应用程序->发布管理->应用程序签名的一个。

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

Answer 10

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

解决方案

在Google Play控制台的API密钥配置中，包括两个约束：

其中包含由expo fetch: android: hashes生成的首字母记录

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

生成的firgerprint

两个限制都必须具有相同的包名称，这一点很重要

Answer 11

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

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

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

如果此时你能看到地图，50% 就完成了。

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

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

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

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

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

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

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

11 个答案: