web-dev-qa-db-fra.com

Obtenir l'emplacement, la latitude et la longitude actuels dans ReactNative à l'aide de cartes réact-native

Je développe un emplacement de carte. Lorsque je clique à un endroit donné, la latitude et la longitude sont indiquées, mais pas la position, la latitude et la longitude actuelles.

Je ne sais pas comment le savoir.

Comment puis-je les obtenir et comment puis-je mettre le marqueur à cette position?

Voici mon code:

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>
    )
  }
}
react-nativereact-native-androidreact-native-maps
14
Lavaraju

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

Définissez un objet mapRegion dans state, le dernier longitude et le dernier latitude sous la forme null:

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

Ensuite, dans votre fonction componentDidMount(), surveillez chaque changement de position actuelle:

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

Quand il y a des changements, mettez-les à jour dans votre this.state.mapRegion, en passant les coordonnées réelles et les valeurs delta (les miennes peuvent être différentes des vôtres, adaptez-les donc):

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

Ensuite, vous avez besoin de la fonction onRegionChange(), utilisée pour "définir" de nouvelles valeurs pour vos éléments dans la fonction componentDidMount():

  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émontez la géolocalisation sur componentWillUnmount():

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

Et passez l’objet MapView en passant votre objet mapRegion actuel, le MapView.Marker à l’intérieur de celui-ci sert uniquement à vous montrer le courant latitude et longitude quand ils changent:

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

Ajoutez le StyleSheet.absoluteFillObject à votre carte afin de l’afficher correctement en utilisant toute la largeur et la hauteur de votre appareil.

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

Donc, pour votre fonction onPress(), vous pouvez faire quelque chose de similaire à onRegionChange(), c’est-à-dire obtenir les coordonnées réelles 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érifiez le code complet sur expo.io (bien que react-native-maps ne soit pas installé)

30
Sebastian Palma

Je vous suggère de lire cette documentation officielle sur la géolocalisation: https://facebook.github.io/react-native/docs/geolocation.html

Ensuite, avec l'emplacement actuel, vous pouvez mettre cette information dans votre état:

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

Vous pourrez ensuite, dans votre méthode de rendu, composer votre vue finale avec un marqueur:

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

Recherchez l'autorisation de localisation à l'aide du 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)
}

Récupérez la latitude et la longitude de l'emplacement actuel à 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
    }
}
0
Rajneesh Shukla