CODEWITHSUNDEEP
react-nativereact-native-maps
Nikeshala
Nikeshala

Reputation: 133

How to get coordinates when placed the marker on map

I created the map using react-native-maps.Now i need to get latitude & longitude as a text when click on map.

I tried this way but it gives an error"Can't find variable:coordinate".

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>
);
  }
}

How i fix it?

Upvotes: 3

Views: 6715

Answers (2)

Nikeshala
Nikeshala

Reputation: 133

I solved it.

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>

);
 }
   }

Upvotes: 5

Ayesh Nipun
Ayesh Nipun

Reputation: 614

Add an onPress event to the map. like below. It will return the coordinates of pressed location in the map.

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

So the code will be,

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

Upvotes: 4

Related Questions