反应原生地图无法正确显示地图答案

【问题标题】：react native maps does not display the map correctly反应原生地图无法正确显示地图
【发布时间】：2018-11-06 11:12:28
【问题描述】：

我已经在我的应用程序中安装了 react-native-maps，但是当我输入 MapView 时，这是输出：

我按照github上的安装指南输入了api密钥，但还是没有显示任何内容。

这是代码：

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: 41.89193,
           longitude: 12.51133,
           latitudeDelta: 0.015,
           longitudeDelta: 0.0121,
         }}
       >
       </MapView>
     </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
   ...StyleSheet.absoluteFillObject,
   height: 400,
   width: 400,
   justifyContent: 'flex-end',
   alignItems: 'center',
 },
 map: {
   ...StyleSheet.absoluteFillObject,
 },
});

有谁知道我可以如何解决这个问题或者它取决于什么？谢谢

【问题讨论】：

尝试使用initialRegion而不是region
我尝试了initialRegion，不幸的是它返回了相同的结果。 @oma
您的实现似乎正确，可能您的互联网连接较弱，似乎内容没有下载。可以用模拟器试试吗？
我尝试使用模拟器，但它返回相同的结果，无论如何我目前的连接速度是 80mbps 下载@oma
你的谷歌地图键设置正确吗？

标签： android react-native react-native-maps

【解决方案1】：

您需要像这样将 provider 添加到 MapView：

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
....
<MapView
     provider={PROVIDER_GOOGLE}
     style={styles.map}
     region={{
       latitude: 41.89193,
       longitude: 12.51133,
       latitudeDelta: 0.015,
       longitudeDelta: 0.0121,
     }}
   >
</MapView>

【讨论】：