英文:
Map is not rendering in View using React-Native-Maps npm package with long and lat
问题
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:
英文:
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
答案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;
英文:
You need to set it up properly google maps for android and iOS from here.
Working Code:
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;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论