Как получить координаты при размещении маркера на карте

Question

Я создал карту с помощью response-native-maps. Теперь мне нужно получить широту и долготу в виде текста при нажатии на карту.

Я пробовал таким образом, но выдает ошибку «Не могу найти переменную: координата».

export default class Location extends Component {
  constructor(props) {
super(props);
this.state = {
  markers: []
};
this.handlePress = this.handlePress.bind(this);
  }
  handlePress(e) {
this.setState({
  markers: [
    ...this.state.markers,
    {
      coordinate: e.nativeEvent.coordinate,
      key: coordinate,
      color: randomColor()
    }
  ]
});
console.log(e.nativeEvent);
  }
  render() {
return (
  <MapView
    style={styles.map}
    initialRegion={{
      latitude: 7.8731,
      longitude: 80.7718,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421
    }}
    onPress={e => this.handlePress(e)}
  >
    {this.state.markers.map(marker => (
      <Marker
        key={marker.key}
        coordinate={marker.coordinate}
        pinColor={marker.color}
      >
        <View style={styles.marker}>
          <Text style={styles.text}>{marker.coordinate}</Text>
        </View>
      </Marker>
    ))}
  </MapView>
);
  }
}

Как мне это исправить?

Answer 1

Я решил это.

export default class Location extends Component {
  constructor(props) {
  super(props);

   this.state = {
    region: {
     latitude: LATITUDE,
     longitude: LONGITUDE,
     latitudeDelta: LATITUDE_DELTA,
     longitudeDelta: LONGITUDE_DELTA,
    },
    markers: {
      coordinate: {
        latitude: 4,
        longitude: 4,
        },
      key: id,
      color: randomColor(),
    }
   };
  }
  onMapPress(e) {
      this.setState({
         markers: 
         {
            coordinate: e.nativeEvent.coordinate,
            key: id++,
            color: randomColor(),
         },
      });

   SaveAddress=()=>{
     console.log(JSON.stringify(this.state.markers[0].coordinate.latitude))
   }
  }

   render() {
       return (

       <MapView
          provider={this.props.provider}
          style={styles.map}
          initialRegion={this.state.region}
          onPress={e => this.onMapPress(e)}
         >

      <Marker
        key={this.state.markers.key}
        coordinate={this.state.markers.coordinate}
        pinColor={this.state.markers.color}
      >
          <View style={styles.marker}>
          <Text style={styles.text}> 
          {JSON.stringify(this.state.markers.coordinate)}</Text>
        </View>
      </Marker>

  </MapView>

);
 }
   }

Answer 2

Добавить событие onPress на карту.как ниже.Он вернет координаты нажатого местоположения на карте.

onPress={ (event) => console.log(event.nativeEvent.coordinate) }

Таким образом, код будет,

<MapView style = {styles.map}
   initialRegion = {{
      latitude: 7.8731,
      longitude: 80.7718,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421, }}
   onPress={ (event) => console.log(event.nativeEvent.coordinate) }
/>