我的要求是,当用户点击 map 上的任意位置时,我需要在 MaoView
上显示标记,并且还需要获取放置标记的位置的坐标(纬度和经度)。
这是我尝试过的:
class Maps extends React.Component {
constructor(props) {
super(props);
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
},
marker: {
latlng: {
latitude: 17.6868,
longitude: 83.2185,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
}
}
};
}
onMapPress(e) {
alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate));
this.setState({
marker: [
{
coordinate: e.nativeEvent.coordinate
}
]
});
}
handleMarkerPress(event) {
const markerID = event.nativeEvent.identifier;
alert(markerID);
}
render() {
return (
<MapView
identifier={"1"}
ref={component => (this.map = component)}
provider={this.props.provider}
style={styles.map}
region={this.state.region}
onPress={this.onMapPress.bind(this)}
//onPress={(event) => this.onMapPress(event)}
provider={PROVIDER_DEFAULT}
mapType="standard"
zoomEnabled={true}
pitchEnabled={true}
showsUserLocation={true}
followsUserLocation={true}
showsCompass={true}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}
>
<MapView.Marker coordinate={this.state.marker.latlng} />
</MapView>
);
}
}
最佳答案
首先,为 map 标记获取一个空数组。
constructor(props) {
super(props)
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
},
markers: [] // Here it is
}
}
然后将单击位置的坐标作为新标记推送到数组中。最后,在你的<MapView>
,渲染所有标记:
<MapView style={styles.map} region={this.state.region}
onPress={(e) => this.setState({ markers: [...this.state.markers, { latlng: e.nativeEvent.coordinate }] })}>
{
// loop through markers array & render all markers
this.state.markers.map((marker, i) => (
<MapView.Marker coordinate={marker.latlng} key={i} />
))
}
</MapView>
每当您点击 map 上的任意位置时,该位置的坐标都会添加到 markers
中数组和 state
已更新,render()
函数将被再次调用,所有标记将被放置在 map 上,包括新标记。
编辑
@FortuneCookie评论:
To show only one marker on the map and when user taps on elsewhere the other marker gets removed, just like dropping a pin.
这要简单得多。首先,更改markers
数组到单个 marker
处于状态。
constructor(props) {
super(props)
this.state = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA
},
// markers: [] Change this
marker: null // to this
}
}
对于<MapView>
,只需更改其子项 & onPress
事件。
<MapView style={styles.map} region={this.state.region}
onPress={(e) => this.setState({ marker: e.nativeEvent.coordinate })}>
{
// if state contains marker variable with a valid value, render the marker
this.state.marker &&
<MapView.Marker coordinate={this.state.marker} />
}
</MapView>
您不必将多个标记放入数组中,然后循环遍历它。相反,您只需将所选位置的坐标放入state
即可。作为单个标记(如果标记存在)然后将其渲染在 map 上。它将自动将所选位置设置为状态并删除任何先前选择的位置。
关于react-native - 在 react native 中单击 map View 上的任意位置时如何放置标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43187453/