logo标签列表

Android模拟器屏幕上未显示Google地图

androidgoogle-mapsreact-nativeandroid-emulatorreact-native-maps
9

我一直在尝试按照这个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>
8个回答
10

我曾经遇到过类似的问题，花费了很多时间才解决它。通常情况下，在真实设备上一切都正常，但在某些模拟器变体上无法显示Google地图。显然，程序代码没有问题，那么问题是为什么？

我目前观察到的有：

  1. 如果禁用硬件加速-一切都能正常工作。

  2. 如果使用纯Android映像，CPU-arm（未加速的x86，速度较慢），但也可以工作。

  3. 如果你在x86_64操作系统下-macOS 10.13.2是我的情况，请使用x86_64版本的模拟器映像，而不是通用的x86！这是我犯的主要错误，不能让它正常工作！用x86_64变体替换我的模拟器映像，解决了所有问题！

10
  • 进入AVD
  • 选择你的设备
  • 进入设置
  • 模拟性能 -> 图形 - 设置为硬件 - GLES 2.0
1
1

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

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

1
如果您使用真实设备的模拟器（例如Genymotion），请确保已安装Google Play支持。检查设备是否启用了互联网（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
  }
});
0

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

  • 当您使用错误的Google Api密钥时。（如果您导入Web API密钥，则应该可以正常工作，请尝试）。并确保启用了地图服务。
  • Android模拟器主要与地图和谷歌服务兼容性较差。我从未在模拟器上运行过地图。因此，请尝试使用实际设备。
我所遵循的示例要求我使用浏览器密钥才能在地图上工作。我认为这是Goggle API控制台凭据中的HTTP API密钥。它与Web API密钥不同还是相同的？此外，我没有物理设备，因此模拟器是我唯一的选择。 - Yash
@Yash 尝试将限制保持为无。至于模拟器问题，就像我说的那样，我从来没有在模拟器上运行过地图。尝试搜索解决方法。 - Ramy M. Mousa
0
0

我曾经遇到了相同的问题。在我的情况下，API密钥是正确的。只是因为我的模拟器Wifi连接不正常。如果你有同样的wifi连接问题，那么this可能也会对你有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接