React Native 地图在 Android 上无法加载（空白地图）

Question

React Native 地图在 Android 上无法加载（空白地图）

9

我已经卡在这里很长时间了，开始认为React Native Maps可能无法在Android模拟器上工作，因为我发现所有看起来能够工作的答案都是针对IOS的。

我目前正在使用Android模拟器运行我的应用程序。以下是一个简单地图的代码...

class MainMap extends Component {
    constructor() {
    super();
  }
    render(){
        return (
            <View style={styles.container}>
            <MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
  </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,
    width:150,
    height:150,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = MainMap;

代码看起来应该可以工作，因为我直接从一个例子中拿来的。我甚至从 Google API 获取了我的 API 密钥，然后在我的 AndroidManifest.xml 中添加了以下内容。

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

现在，当我运行react-native run-android时，应用程序似乎正常运行，没有错误消息。但是，应用程序是空白的。 View容器加载正常，但其内容MapView根本不加载。我看到的只是一个空白屏幕。

请注意，我还在模拟器上安装了Google Play服务和Google API。

由于我根本没有收到任何错误消息，所以我该如何调试此问题？ react-native maps在Android模拟器上能工作吗？

编辑

我已经陷入困境很长时间了，这让我无法继续开发我的项目。由于问题的性质很难调试，所以我将提供一个github链接到我的存储库，以防有人愿意在他们的端上复制问题并查看我的问题是什么...

https://github.com/Bolboa/TTC-Mapping

我只需要地图加载。代码看起来应该可以工作，但地图没有加载...

我将向任何能够帮助我的人提供赏金。

- buydadip

尝试使用 container 样式，其中包含以下内容：container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }。 - lwinkyawmyat

@ubatin 我试过了，似乎地图根本没有加载出来... - buydadip

你尝试过在Google API控制台中删除API密钥的签名吗？我的意思是包名和SHA1密钥。有时候这是调试密钥和发布密钥的问题。我只是想问一下你是否考虑过这种方法？ - Arpan Sharma

@ArpanSharma 好的，我的密钥没有受到限制，因此在Google API控制台中我只得到了一个随机的API密钥，然后将其包含在我的“meta”标签中。所以我认为我正在使用这种方法。 - buydadip

@Bolboa，你试过更改密钥了吗？ - Arpan Sharma

4个回答

1

由于某些原因，需要重新生成 API 密钥并在以下位置进行更新：

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

它为我解决了问题。不确定如何解决，因为两者都具有相同的设置...不再出现带有Google图标的灰色屏幕！

- beyondtdr

0

你只是创建了一个名为styles的变量，其中包含map样式，但你没有将该样式应用于MapView。你需要添加以下行，将样式分配给MapView：

style={styles.map}

现在看起来就像这样

<View style={styles.container}>
    <MapView
        style={styles.map}
        initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
       }}/>
</View>

同时也请查看故障排除部分，您错过了第二部分。
如果即使添加了样式仍然无法看到地图，则可能是您的密钥出现问题。

- Anirudha Agashe

0

激活“Maps SDK for Android”和“Maps SDK for iOS”

进入Google Cloud Platform控制台。https://cloud.google.com/console/google/maps-apis/overview
在顶部导航栏中选择您的项目。
单击菜单，然后转到“API和服务”>“库”
激活“Maps SDK for Android”和“Maps SDK for iOS”。
然后创建新的API密钥，并将其添加到<application>标记内的AndroidManifest.xml文件中：

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

- Uladzislau Ulasenka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nimish Patel · Accepted Answer

< p>为MapView添加样式。

包含

var { width, height } = Dimensions.get('window')

在渲染方法中

<View style={styles.container}>
        <MapView style = {styles.mapcontainer}
          showsUserLocation={true}
          showsMyLocationButton={false}
          zoomEnabled = {true}
          region={this.state.region} >
        </MapView>
</View>

包含样式

container: {
    flex: 1,
  },
mapcontainer: {
    flex: 1,
    width: width,
    height: height,
  },