Question

我试图使用airbnb的react-native-maps，但地图没有显示在模拟器上。我的代码似乎与解决了这个问题的其他代码相同，但模拟器只是一个带有红色边框的空白屏幕。开箱即用Mapview可以使用，但我想使用airbnb的版本。

ok <- sapply(df, is.numeric)
df[ok] <- lapply(df[ok], na.aggregate)

Answer 1

您忘记将styles添加到MapView：

<MapView

  style={styles.map}

  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

不要忘记定义你的风格：

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

因为要使mapView工作，您需要将MapView的样式设置为设置了top，left，right和bottom值的绝对位置。如上所述in the repo

Answer 2

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

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

Answer 3

我搞砸了我的google API密钥，重新生成了代码，并且在google开发人员控制台中，我已经附加了SHA密钥并且可以正常工作。

Answer 4

确保您使用的是Android Key（在我的情况下，我使用的是错误的密钥）。在Google Cloud Platform内部的凭据中，复制Android密钥并将其复制到AndroidManifest.xml中。

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

Answer 5

你必须给 MapView 赋予样式

<MapView
  style={{flex:1}}
  region={{latitude: 52.5200066,
  longitude: 13.404954,
  latitudeDelta: 0.005,
  longitudeDelta: 0.005}}
   />

此处 flex 的值为 1，因此地图在整个屏幕上都可见。

Answer 6

您在空白地图周围看到红色边框的原因是因为很可能在package.json中，您必须指定版本＆gt; = 0.12.4和NOT ^ 0.12.4（这意味着兼容0.12.4）。因此，请查找dependencies部分并从

更改

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": "^0.12.4",
    ....
},

到

"dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2",
    "react-native-maps": ">=0.12.4",
    ....
},

然后，运行以下命令：

$ npm update
$ react-native link
$ cd ios
$ touch Podfile

将sample Podfile复制并粘贴到您的Podfile中。更改目标并保存文件。然后运行

$ pod install

您可能还需要为MapView添加样式属性：

<MapView style={styles.map}
   initialRegion={{
    ... 
   }}
/>

信用转到这篇文章Fuck the red borders of react-native-maps by AirBnb

Answer 7

我遇到了这个问题，我所要做的就是重新编译项目。一旦我这样做，红色边框消失了，我得到了地图来呈现。

Answer 8

解决方案：在您的 Google Cloud 平台帐户上启用结算功能。

基本上你必须遵循这个指南：https://docs.expo.io/versions/latest/sdk/map-view/

然后，您必须为 Android（或 iOS）启用 Maps SDK，然后启用计费。即使 Maps SDK for Android 是完全免费的，他们也需要您的信用卡。之后，它会正常工作。

React Native react-native-maps Mapview没有显示

8 个答案: