问题

I have a react native project I am building. I am trying to integrating react-native-maps. I currently have a View that is 400px X 400px that I want to render a map into with initial market. I currently have the view setup to render Los Angeles, CA as the center point with the longitude and latitude. Right now it is not rendering anyhing except for the view with the background I created. I want to render the map and have it interactive. Can anyone help me figure out why it is not rendering anything??

code snippet for component:

import React, { useContext, useEffect, useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'

import MapView from 'react-native-maps';

import { PropertiesContext } from '../../Context/PropertiesContext';

const MainMapsConponents = () => {
  const {cityLat, cityLong} = useContext(PropertiesContext)

  return (
    <View>
      <View>
        <Text>{cityLat} - {cityLong}</Text>
      </View>
      <View style={styles.mapWindow}>
        <MapView 
          scrollEnabled={true}
          zoomEnabled={true}
          zoomTapEnabled={true}
          style={styles.map} 
          initialRegion={{
            latitude: cityLat,
            longitude: cityLong,
            latitudeDelta: 0.5,
            longitudeDelta: 0.5,
          }}
        ></MapView>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  mapWindow: {
    height: '100%',
    width: '100%',
    backgroundColor: 'lightgrey'
  }
})

export default MainMapsConponents

Here is a screenshot of what I am seeing:

import React, { useContext, useEffect, useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'

import MapView from 'react-native-maps';

import { PropertiesContext } from '../../Context/PropertiesContext'

const MainMapsConponents = () => {
  const {cityLat, cityLong} = useContext(PropertiesContext)

  return (
    <View>
      <View>
        <Text>{cityLat} - {cityLong}</Text>
      </View>
      <View style={styles.mapWindow}>
        <MapView 
          scrollEnabled={true}
          zoomEnabled={true}
          zoomTapEnabled={true}
          style={styles.map} 
          initialRegion={{
            latitude: cityLat,
            longitude: cityLong,
            latitudeDelta: 0.5,
            longitudeDelta: 0.5,
          }}
        ></MapView>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  mapWindow: {
    height: '100%',
    width: '100%',
    backgroundColor: 'lightgrey'
  }
})

export default MainMapsConponents

答案1

得分: 1

以下是翻译好的部分：

你需要正确设置 Google 地图，适用于 Android 和 iOS，从这里。

工作代码：

import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import MapView, { Callout, Marker } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

const MapDemo = () => {

    const data = {
        region: {
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
        },
    }

    return (
        <View style={styles.container}>
            <MapView
                style={styles.map}
                initialRegion={data}
                scrollEnabled={true}
                zoomEnabled={true}
                zoomTapEnabled={true}
                loadingEnabled
                loadingIndicatorColor="#666666"
                loadingBackgroundColor="#eeeeee">

                <Marker
                    coordinate={{
                        latitude: LATITUDE - SPACE,
                        longitude: LONGITUDE - SPACE,
                    }}
                    centerOffset={{ x: -42, y: -60 }}
                    anchor={{ x: 0.84, y: 1 }}>
                    <Callout>
                        <View>
                            <Text>This is a plain view</Text>
                        </View>
                    </Callout>
                </Marker>
            </MapView>
            <View style={styles.buttonContainer}>
                <View style={styles.bubble}>
                    <Text>Map with Loading</Text>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        ...StyleSheet.absoluteFillObject,
    },
    bubble: {
        backgroundColor: 'rgba(255,255,255,0.7)',
        paddingHorizontal: 18,
        paddingVertical: 12,
        borderRadius: 20,
    },
    buttonContainer: {
        flexDirection: 'row',
        marginVertical: 20,
        backgroundColor: 'transparent',
    },
});

export default MapDemo;

import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import MapView, { Callout, Marker } from 'react-native-maps';
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;
const MapDemo = () => {
const data = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
},
}
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={data}
scrollEnabled={true}
zoomEnabled={true}
zoomTapEnabled={true}
loadingEnabled
loadingIndicatorColor="#666666"
loadingBackgroundColor="#eeeeee">
<Marker
coordinate={{
latitude: LATITUDE - SPACE,
longitude: LONGITUDE - SPACE,
}}
centerOffset={{ x: -42, y: -60 }}
anchor={{ x: 0.84, y: 1 }}>
<Callout>
<View>
<Text>This is a plain view</Text>
</View>
</Callout>
</Marker>
</MapView>
<View style={styles.buttonContainer}>
<View style={styles.bubble}>
<Text>Map with Loading</Text>
</View>
</View>
</View>
)
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
bubble: {
backgroundColor: 'rgba(255,255,255,0.7)',
paddingHorizontal: 18,
paddingVertical: 12,
borderRadius: 20,
},
buttonContainer: {
flexDirection: 'row',
marginVertical: 20,
backgroundColor: 'transparent',
},
});
export default MapDemo;