大家下午好,我正在用React native开发一个应用程序,我将库react-native-maps放在滚动视图中显示了一些固定的地图,在android中,我用标记显示了坐标,但是当我移动地图时,尝试滚动
我正在尝试使用staticmap,但是必须在ios中保留地图,而我却留空了。
import React, {Component} from 'react'
import {View, Text, TouchableOpacity, Platform, Image} from 'react-native'
import MapApp from './MapApp'
const staticMapURL = 'https://maps.googleapis.com/maps/api/staticmap'
class PropertyListCard extends Component {
renderMap(){
if(Platform.OS == 'ios'){
console.log(Platform.OS)
return(
<View
style={{
width: 500,
height:500,
backgroundColor: 'red'
}}
>
<Image
source={{uri: "https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=MyGoogleKey"}}
style={{
width: 200,
height: 200
}}
/>
</View>
)
}else{
return(
<MapApp />
)
}
}
render(){
return(
<View style={styles.container}>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>
{this.props.data.direction}
</Text>
</View>
<View style={styles.mapContainer}>
{this.renderMap()}
</View>
<TouchableOpacity
style={styles.btn}
onPress={()=>{}}
>
<Text
style={styles.btnText}
>
Ver Vecinos
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = {
container: {
flex:1,
backgroundColor: '#fff',
margin: 10,
borderRadius: 10
},
titleContainer:{
height: 40,
justifyContent: 'center',
borderBottomWidth: 1,
borderColor: 'grey'
},
titleText: {
paddingLeft: 20,
fontSize: 17,
fontWeight: 'bold'
},
mapContainer:{
width: '100%',
height: 200
},
btn:{
height: 50,
width: '100%',
backgroundColor: '#008591',
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
alignItems: 'center',
justifyContent: 'center',
},
btnText: {
color: '#fff',
fontSize: 17,
fontWeight: 'bold',
}
}
export default PropertyListCard
答案 0 :(得分:0)