Obtenez de l'emplacement actuel, de la latitude et de longitude dans ReactNative à l'aide de réagir-native-cartes

Je l'ai fait en suivant ces étapes à l'aide de [email protected] et react-native-maps@^0.13.1 et à l'aide de [email protected] et react-native-maps@^0.15.2 à la date:

Définir un mapRegion objet dans le state, la dernière longitude et le dernier latitude comme null:

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

Puis à l'intérieur de votre componentDidMount() montre la fonction pour chaque changement dans la position actuelle:

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

Quand il y a des changements de mise à jour dans votre this.state.mapRegion, en passant le réel coords et la delta valeurs (le mien peut être différente de la vôtre, afin de les adapter):

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

Alors vous avez besoin de la onRegionChange() fonction, qui est utilisé pour "régler" les nouvelles valeurs de vos éléments au sein de la componentDidMount() fonction:

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

Démonter la géolocalisation sur componentWillUnmount():

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

Et de rendre la MapView en passant votre mapRegion objet, le MapView.Marker intérieur de celui-ci est juste pour vous montrer l'actuel latitude et longitude quand ils changent de:

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

Ajouter le La feuille de style.absoluteFillObject pour votre carte afin de rendre correctement en utilisant toute la largeur et la hauteur de votre appareil.

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

Donc, pour votre onPress() fonction que vous pourriez faire quelque chose de similaire à la onRegionChange(), c'est pour obtenir les coordonnées et les définir:

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

Vérifier le code complet sur expo.io (bien que react-native-maps n'est pas installé)

Chercher pour le lieu de l'autorisation en utilisant le code suivant:

try {
    const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        alert("You can use the location")
    }
    else {
        alert("Location permission denied")
    }
}
catch (err) {
    console.warn(err)
}

Chercher l'emplacement actuel de la latitude et de longitude à l'aide du code suivant:

this.watchID = navigator.geolocation.watchPosition((position) => {
    let region = {
        latitude:       position.coords.latitude,
        longitude:      position.coords.longitude,
        latitudeDelta:  0.00922*1.5,
        longitudeDelta: 0.00421*1.5
    }
}