Question

我曾尝试在论坛和S.O上寻找它。但没有发现任何具体内容。

我正在使用React Native开发应用程序。这个应用程序有一个屏幕，在其中我显示带有一些标记的Google Maps，这些标记是从数据库中检索到的。

我从react-native-maps导入MapView，将其包含在我的渲染函数中并设置了initialRegion，但是当我重新加载应用程序时，我得到的只是一个带有红色边框的白色正方形。

据我所知，我需要一个Google Maps API密钥才能看到地图，但我不知道如何输入该密钥。

我正在运行Windows 10并构建适用于android的应用程序，并在自己的设备上运行它（三星Galaxy A7 2017 / Android版本7.1）

这是页面的代码：

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image, Dimensions } from 'react-native';
import Topbar from '../components/Topbar';
import MapView from 'react-native-maps';
import Dimens from '../styles/Dimens';

export default class GoogleMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }
    static navigationOptions = {
        title: "Google Maps",
        drawerLabel: 'Google Maps',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../drawables/menu/static_map.png')}
                style={[AppStyles.menuIcon, { tintColor: tintColor }]}
            />
        )
    }
    render() {
        return (
            <View>
                <Topbar navigation={this.props.navigation} title="Google Maps" />
                <View style={styles.container}>
                    <MapView style={styles.map}
                        initialRegion={{
                            latitude: 59.3293,
                            longitude: 18.0685,
                            latitudeDelta: 0.1,
                            longitudeDelta: 0.1
                        }}
                    >
                    </MapView>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0
    }
});

React Native Maps显示红色轮廓

0 个答案: