android - Android 模拟器没有在屏幕上显示谷歌地图

Question

我一直在尝试遵循此https://github.com/airbnb/react-native-maps教程，我尝试了他们所说的一切，但在我的 android studio 模拟器上却出现了空白屏幕。

我的截图

我的代码：

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

import MapView from 'react-native-maps';

export default class ReactNativeMaps extends Component {
  render() {
   const { region } = this.props;
   console.log(region);

   return (
     <View style ={styles.container}>
       <MapView
         style={styles.map}
         region={{
           latitude: 39.1329,
           longitude: 84.5150,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </View>
   );
 }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

AppRegistry.registerComponent('ReactNativeMaps', () => ReactNativeMaps);

AndroidManifest.xml 文件：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.reactnativemaps"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="AIzaSyC3injbScdjmMp7J5MM1GqBhSb-kulIF_8"/>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

score 9 · Accepted Answer

我有类似的问题，花了很多时间才解决它。通常在真实设备上一切正常，但无法在我的一些模拟器变体上显示谷歌地图。显然，程序代码没问题，那么问题是为什么？

到目前为止我所观察到的：

如果硬件加速被禁用 - 一切都恢复正常。
如果使用纯 android 映像，cpu-arm（没有加速 x86，它更慢），但也可以。
如果您在 x86_64 操作系统下 - 在我的情况下是 macOS 10.13.2，请使用 x86_64 版本的模拟器映像，而不是通用 x86 ！！！那是我的主要错误，没有让它起作用！用 x86_64 变体替换我的模拟器的图像，解决所有问题！

score 7 · Accepted Answer

7

前往 AVD
选择您的设备
进入设置
模拟性能 -> 图形 - 设置为硬件 - GLES 2.0

于 2018-01-24T11:26:25.010 回答

score 1 · Accepted Answer

如果您使用的是真机模拟器（如Genymotion），请确保您已经安装了Google Play support.

检查您的设备上是否启用了互联网（GPS/Wifi/数据）。

并且不要忘记为地图样式添加宽度和高度。

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width:200,
    height:200
  }
});

score 1 · Accepted Answer

对于相同的目标版本，我也遇到了同样的问题，我通过更改 google-api 密钥解决了这个问题。使用链接重新生成 google api 密钥

https://developers.google.com/maps/documentation/android-api/signup#release-cert

并将其添加到您添加的 AndroidManifest.xml 文件中

score 0 · Accepted Answer

对于使用地图的空白屏幕，通常有两个主要原因：

当您使用错误的 Google Api Key 时。（如果您导入 web api 密钥，它应该可以工作，请尝试）。并确保您启用了地图服务。
Android Emulator 主要是在地图和谷歌服务方面太差了。我从来没有让我的模拟器运行地图。所以尝试一个实际的设备。

score 0 · Accepted Answer

尝试通过模拟器的 Play 商店更新 Google 地图。新创建的模拟器将具有过时的 Google 地图版本。

如果您无法更新地图，请尝试更新 Google Play 服务。

score 0 · Accepted Answer

https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers =color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Clabel:C%7C40.718217,-73.998284 &key=YOUR_API_KEY

使用此静态地图检查您的 api 密钥

score 0 · Accepted Answer

我遇到过同样的问题。就我而言，API 密钥是正确的。只是因为我的模拟器 Wifi 没有正确连接。如果您对 wifi 连接有同样的问题，这个答案也可能对您有所帮助。

android - Android 模拟器没有在屏幕上显示谷歌地图

8 回答 8

Related

Reference