我要实现的是,当用户键入所有数据(如位置,名称,描述)时,它将在地图上创建标记和卡片。我无法弄清楚实现该目标的目标。我需要专家的答复。谢谢!
这是我的代码:
this.state = {
focusedLocation: {
latitude: 0,
longitude: 0,
// latitudeDelta: 0.04864195044303443,
// longitudeDelta: 0.040142817690068,
latitudeDelta: 0.01,
longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height * 0.01
},
locationChosen: false,
markerPosition: {
latitude: 0,
longitude: 0
},
markers: [
{
coordinate: {
latitude: 37.42484589323653,
longitude: -122.08271104842426
},
title: "Palawan",
description: "This is the first best place in the world.",
image: Images[0]
},
{
coordinate: {
latitude: 37.42019338901534,
longitude: -122.08207536488771
},
title: "Boracay",
description: "This is the second best place in the world.",
image: Images[1]
},
{
coordinate: {
latitude: 37.4219108525511,
longitude: -122.08126466721296
},
title: "Tagaytay",
description: "This is the third best place in the world.",
image: Images[2]
},
{
coordinate: {
latitude: 37.42190153308783,
longitude: -122.08728086203337
},
title: "Baler",
description: "This is the fourth best place in the world.",
image: Images[3]
},
{
coordinate: {
latitude: 37.419681603891306,
longitude: -122.08521489053966
},
title: "Bohol",
description: "This is the fifth best place in the world.",
image: Picture
}
],
}
render() {
//For the UserMarker
let userMarker = null;
if(this.state.locationChosen) {
userMarker = <MapView.Marker coordinate={this.state.markerPosition} />
}
//For the Scroll View Card
const interpolations = this.state.markers.map((marker, index) => {
const inputRange = [
(index - 1) * CARD_WIDTH,
index * CARD_WIDTH,
((index + 1) * CARD_WIDTH),
];
const scale = this.animation.interpolate({
inputRange,
outputRange: [1, 2.5, 1],
extrapolate: "clamp",
});
const opacity = this.animation.interpolate({
inputRange,
outputRange: [0.35, 1, 0.35],
extrapolate: "clamp",
});
return { scale, opacity };
});
return(
<View style={styles.container}>
{/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
<MapView
style={styles.container}
initialRegion={this.state.focusedLocation}
onPress={this.pickLocationHandler}
showsUserLocation={true}
ref={ref => this.map = ref} //For animating map movement
>
{userMarker}
{this.state.markers.map((marker, index) => {
const scaleStyle = {
transform: [
{
scale: interpolations[index].scale,
},
],
};
const opacityStyle = {
opacity: interpolations[index].opacity,
};
return (
<MapView.Marker key={index} coordinate={marker.coordinate}>
<Animated.View style={[styles.markerWrap, opacityStyle]}>
<Animated.View style={[styles.ring, scaleStyle]} />
<View style={styles.marker} />
</Animated.View>
</MapView.Marker>
);
})}
</MapView>
<Animated.ScrollView
horizontal
scrollEventThrottle={1}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
snapToInterval={snapInterval}
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: {
x: this.animation,
},
},
},
],
{ useNativeDriver: true }
)}
style={styles.scrollView}
contentContainerStyle={styles.endPadding}
>
{this.state.markers.map((marker, index) => (
<TouchableOpacity onPress={this.navigateToEvent} key={index}>
<View style={styles.card} key={index}>
<Image
source={marker.image}
style={styles.cardImage}
resizeMode="cover"
/>
<View style={styles.textContent}>
<Text numberOfLines={1} style={styles.cardtitle}>{marker.title}</Text>
<Text numberOfLines={1} style={styles.cardDescription}>
{marker.description}
</Text>
</View>
</View>
</TouchableOpacity>
))}
</Animated.ScrollView>
<TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
<Icon name="md-locate" size={30} color="blue"/>
</TouchableOpacity>
</View>
);
}
这是图像。紫色标记以其特定的纬度和经度连接到卡片。