简体   繁体   中英

React-Native: Google maps only showing the logo, beige background and the makter

I am trying to get Google Maps to work in React-Native, but I'm only getting this far:

What I have so far

My code:

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

class Additional extends Component {
render() {
  return (
<View style={styles.container}>

    <MapView style={styles.map}
        region={{
            latitude: 4.895168,
            longitude: 52.370216,
            latitudeDelta: 0.1,
            longitudeDelta: 0.1,
        }}
    >

    <MapView.Marker
        coordinate={{
            latitude: 4.895168,
            longitude: 52.370216
            }}
            title={"titel"}
            description={"descriptie"}
            />
    </MapView>
</View>
  );
      }
}



Additional.navigationOptions = {
  title: 'Second Screen Title',
};


const styles = StyleSheet.create({
  container: {
        flex: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
  },
  map: {
      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0
  },
});




export default Additional;

I have followed this tutorial for the api key and adding google maps: Tutorial

This is my second page, the other one page is using a weather-api. But according to the live-debugger nothing is conflicting.

Does anyone know what's going on? Thanks!

Edit/additional information: I have activated my API on the google-api webpage.

Edit/additional information: My androidmanifest

I was missing a bunch of permissions:

<permission      android:name="com.shop.shoppinglist.permission.MAPS_RECEIVE" 
 android:protectionLevel="signature"/>
<uses-permission android:name="com.shop.addtask.permission.MAPS_RECEIVE"/>
<uses-permission 
 android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM