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

Question

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

我所做的：

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

在谷歌控制台 APIs -> 创建新项目 -> 启用谷歌地图 Android API，谷歌地图 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"
    }
}

应用程序.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

Answer 1

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

无论如何，这里有一些技巧可以根据我过去的经验来运行react-native-maps 。

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

Answer 2

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

Answer 3

确保您在 Google Console 中启用 API 密钥以与Maps SDK for Android ，如果您想为 iOS 启用Maps SDK for iOS

Answer 4

我花了一整天尝试谷歌提供的解决方案，但似乎遗留元数据对我不起作用，所以我在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的步骤：

1. 转到Google Api 控制台。

2. 在屏幕的左上角，就在Google Apis徽标的右侧，您会看到您的项目名称，选择正确的项目名称，然后在项目名称下方，您会看到一个蓝色文本+ ENABLE APIS AND SERVICES 。 点击它。

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

Answer 5

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

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

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

Answer 6

我一直在努力应对 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”，不存在。

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

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

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

Answer 10

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

TL; 博士

根据部署到播放商店部分的文档，我不得不添加另一个 SHA-1 证书指纹。 不仅来自expo fetch:android:hashes命令输出的，还有来自Google Play Console -> Your App -> Release management -> App signature 的。

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

Answer 11

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

解决方案

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

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

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

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

Answer 12

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

我在弹出 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

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

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

Answer 13

Go 到您的

1. 谷歌控制台开发者帐户
2. Select 您的项目

Android

3. 为 Android 启用地图 SDK

iOS

3. 为 iOS 启用地图 SDK

Answer 14

经过一番研究，发现这段代码对我有用。 我注意到不同之处在于创建了一个useRef() object 并将其添加为依赖项。 我也将initialRegion更改为region ：

import React, {useState, useEffect, useRef} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

import Geolocation from 'react-native-geolocation-service';

const GeoScreen = () => {
  const [newPosition, setNewPosition] = useState({
    latitude: 37.12,
    longitude: -122.1,
    latitudeDelta: 0.0421,
    longitudeDelta: 0.0421,
  });
  const mapRef = useRef();

  useEffect(() => {
    Geolocation.getCurrentPosition(pos => {
      const coord = pos.coords;
      console.log({coord: coord});

      setNewPosition({
        latitude: coord.latitude,
        longitude: coord.longitude,
        latitudeDelta: 0.1421,
        longitudeDelta: 0.1421,
      });
    });
  }, [mapRef]);

  console.log({newPosition: newPosition});

  return (
    <MapView
      ref={mapRef}
      provider={PROVIDER_GOOGLE}
      style={styles.map}
      region={newPosition}
      showsUserLocation={true}
      showsMyLocationButton={true}
    >
      <Marker
        title="Your title"
        coordinate={newPosition}
      />
    </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default GeoScreen;

Answer 15

✅ 我的疏忽错误是我在没有替换占位符 API 键的情况下复制粘贴代码。 来自官方文档： https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

1. npm i react-native-maps

2.重要提示：不要忘记在 Google 云平台上为Android启用Map SDK，为 iOS启用 Map SDK

3.将API 密钥添加到清单文件 ( android/app/src/main/AndroidManifest.xml )：

<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/> // ***HERE I NEED TO REPLACE MY KEY AND I FORGET
</application>

4.这是快速片段代码，使其可见

   import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps    
   <MapView
       provider={PROVIDER_GOOGLE} // remove if not using Google Maps
       style={{
          height: 400,
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
       }}
       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"}
       />
    </MapView>

让我知道这是否有帮助。