React Native react-native-maps Mapview 不显示

Question

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

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

export default class Haulr extends Component {
  render() {
    return (
    <MapView
      initialRegion={{
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

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

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 值。如回购中所述

Answer 2

1. 转到谷歌云平台控制台。 https://cloud.google.com/console/google/maps-apis/overview

2. 使用顶部导航栏中的下拉菜单选择您的项目。

3. 单击菜单并转到“API 和服务”>“库”

4. 激活“Android Maps SDK”和“iOS Maps SDK”。

5. 然后创建新的API密钥并将其添加到

   AndroidManifest.xml

   中的项目中

   <application>

   标签：

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

Answer 3

首先需要开启Maps SDK for Android，然后需要给MapView样式添加宽高。

 return (
    <View>
      <MapView style={styles.map} />
    </View>
  );

const styles = StyleSheet.create({
 
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

Answer 4

我搞砸了我的谷歌 API 密钥，我重新生成并在谷歌开发者控制台中我附加了 SHA 密钥并且它有效。

Answer 5

确保您使用的是 Android 密钥（在我的情况下，我使用了错误的密钥）。 在凭据中，在 Google Cloud Platform 中，复制 Android 密钥和过去的 AndroidManifest.xml。

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

Answer 6

你必须给 MapView 风格

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

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

Answer 7

这对我有用，设置高度：

import { Dimensions } from "react-native";

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

const styles = StyleSheet.create({
    map: {
        ...StyleSheet.absoluteFillObject,
        height: Dimensions.get("window").height,
    },
});

Answer 8

try this code and mandatory use  
   { enableHighAccuracy: false, timeout: 50000},

Answer 9

你在空白地图周围看到红色边框的原因是因为很可能在 package.json 中，你必须指定版本 >=0.12.4 而不是 ^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={{
    ... 
   }}
/>

Credit to this postFuck the red borders of react-native-maps by AirBnb

Answer 10

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

Answer 11

解决方案：在您的谷歌云平台账户上启用计费。

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

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