Obtenga la ubicación actual, la latitud y la longitud en ReactNative usando react-native-maps

Solución:

Lo hice siguiendo estos pasos usando [email protected] y [email protected]^0.13.1 y usando [email protected] y [email protected]^0.15.2 en la fecha:

Establecer un mapRegion objeto en el state, el último longitude y el último latitude como null:

state = {
  mapRegion: null,
  lastLat: null,
  lastLong: null,
}

Entonces dentro de tu componentDidMount() función de vigilancia para cada cambio en la posición actual:

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      ...
    });
  }

Cuando haya cambios actualícelos en su this.state.mapRegion, pasando las coordenadas reales y el delta valores (el mío puede ser diferente al tuyo, así que adáptalos):

  componentDidMount() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      // Create the object to update this.state.mapRegion through the onRegionChange function
      let region = {
        latitude:       position.coords.latitude,
        longitude:      position.coords.longitude,
        latitudeDelta:  0.00922*1.5,
        longitudeDelta: 0.00421*1.5
      }
      this.onRegionChange(region, region.latitude, region.longitude);
    }, (error)=>console.log(error));
  }

Entonces necesitas el onRegionChange() función, que se utiliza para “establecer” nuevos valores para sus elementos dentro de la componentDidMount() función:

  onRegionChange(region, lastLat, lastLong) {
    this.setState({
      mapRegion: region,
      // If there are no new values set the current ones
      lastLat: lastLat || this.state.lastLat,
      lastLong: lastLong || this.state.lastLong
    });
  }

Desmontar la geolocalización en componentWillUnmount():

  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }

Y rinde el MapView pasando tu corriente mapRegion objeto, el MapView.Marker dentro de él es solo para mostrarte la corriente latitude y longitude cuando cambian:

  render() {
    return (
      <View style={{flex: 1}}>
        <MapView
          style={styles.map}
          region={this.state.mapRegion}
          showsUserLocation={true}
          followUserLocation={true}
          onRegionChange={this.onRegionChange.bind(this)}>
          <MapView.Marker
            coordinate={{
              latitude: (this.state.lastLat + 0.00050) || -36.82339,
              longitude: (this.state.lastLong + 0.00050) || -73.03569,
            }}>
            <View>
              <Text style={{color: '#000'}}>
                { this.state.lastLong } / { this.state.lastLat }
              </Text>
            </View>
          </MapView.Marker>
        </MapView>
      </View>
    );
  }

Agregue StyleSheet.absoluteFillObject para su mapa para renderizarlo correctamente usando todo el ancho y alto de su dispositivo.

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  }
});

Entonces para tu onPress() función, podría hacer algo similar a la onRegionChange(), eso es para obtener las coordenadas reales y establecerlas:

  onMapPress(e) {
    let region = {
      latitude:       e.nativeEvent.coordinate.latitude,
      longitude:      e.nativeEvent.coordinate.longitude,
      latitudeDelta:  0.00922*1.5,
      longitudeDelta: 0.00421*1.5
    }
    this.onRegionChange(region, region.latitude, region.longitude);
  }

Consulte el código completo en expo.io (aunque react-native-maps no está instalado)

Le sugiero que lea esta documentación oficial sobre geolocalización: https://facebook.github.io/react-native/docs/geolocation.html

Luego, con la ubicación actual, puede poner esa información en su estado:

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

A continuación, podrá, en su método de renderizado, componer su vista final con un marcador:

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

---

---

Utiliza Nuestro Buscador