Получить текущее местоположение, широта и долгота в ReactNative с помощью react-native-maps

на самом деле я разрабатываю местоположение карты, когда я нажимаю в определенном месте, я получаю широту и долготу, но не текущее местоположение, широту и долготу.

Я не знаю, как это узнают.

Как я могу их получить и как я могу поместить маркер в эту позицию.

вот мой код:

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:       null,
          longitude:      null,
          latitudeDelta:  LATITUDE_DELTA,
          longitudeDelta: LONGITUDE_DELTA
        }
      }
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition (
      (position) => { alert("value:" + position) },
      (error)    => { console.log(error) },
      { 
        enableHighAccuracy: true, 
        timeout:            20000, 
        maximumAge:         10000 
      }
    )
  }

  onMapPress(e) {
    alert("coordinates:" + JSON.stringify(e.nativeEvent.coordinate))
      this.setState({
        marker: [{ coordinate: e.nativeEvent.coordinate }]
      })
    }

  render() {
    return (
      <View style={styles.container}>
        <View style={{flexGrow:1}}>
          <MapView
            ref="map"
            provider={this.props.provider}
            style={styles.map}
            onPress={this.onMapPress.bind(this)}
            provider = {PROVIDER_DEFAULT}
            mapType="standard"
            zoomEnabled={true}
            pitchEnabled={true}
            showsUserLocation={true}
            followsUserLocation={true}
            showsCompass={true}
            showsBuildings={true}
            showsTraffic={true}
            showsIndoors={true}>
          </MapView>
        </View>
      </View>
    )
  }
}
9
react-native react-native-android react-native-maps

2 ответов

я сделал это, следуя этим шагам, используя react-native@0.42.3 и react-native-maps@^0.13.1 и с помощью react-native@0.44.0 и react-native-maps@^0.15.2 на дату:

поставил

23

предлагаю вам ознакомиться с этой официальной документацией о геолокации:https://facebook.github.io/react-native/docs/geolocation.html

затем, с текущим местоположением, вы можете поместить эту информацию в свое состояние

navigator.geolocation.getCurrentPosition((position) => {
    this.setState({position: {longitude: position.longitude, latitude: position.latitude}});
}, (error) => {
    alert(JSON.stringify(error))
}, {
    enableHighAccuracy: true,
    timeout: 20000,
    maximumAge: 1000
});

затем вы сможете в своем методе рендеринга составить окончательный вид с помощью маркера:

render() {
  return (
    <MapView ...>
      <MapView.Marker
        coordinate={this.state.position}
        title="title"
        description="description"
      />
    </MapView>
  )
}
4