web-dev-qa-db-fra.com

Comment obtenir l'emplacement actuel en utilisant React-Native-Maps

Im essayant de rendre une carte à la géolocalisation de l'utilisateur actuel sur Android, en utilisant des cartes natives réactives.

Voici ce que j'ai jusqu'à présent:

import React, { Component } from 'react';

import {
  View,
  StyleSheet,
  Dimensions,
} from 'react-native';

import MapView from 'react-native-maps';

const {width, height} = Dimensions.get('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

class MapComponent extends Component {
  constructor() {
    super()
    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0,
      },
    }
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      var lat = parseFloat(position.coords.latitude)
      var long = parseFloat(position.coords.longitude)

      var initialRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      }

      this.setState({initialPosition: initialRegion})
    },
    (error) => alert(JSON.stringify(error)),
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
  }


  renderScreen = () => {
      return (
        <View style={styles.container}>
          <MapView
            style={styles.map}
            initialRegion={this.state.initialPosition}/>
        </View>
      );
  }

  render() {
    return (
      this.renderScreen()
    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

export default MapComponent;

La carte s'affiche, mais pas dans la géolocalisation actuelle de l'appareil, comme prévu. (il rend au milieu de l'océan)

Les autorisations sont déjà définies dans AndroidManifest.xml comme:

<uses-permission Android:name="Android.permission.ACCESS_FINE_LOCATION" />

Après 20 secondes, je reçois une alerte disant: "La demande de localisation a expiré" "code 3"

Qu'est-ce que je fais mal?

androidreact-nativegeolocationreact-native-maps
6
MacFlyer

Je ne suis pas sûr mais il y a un issue ("Geolocation timed out, code 3") qui semble lié

Pour toute autre personne aux prises avec ce problème sur Android, essayez de supprimer le paramètre d'option maximumAge: 2000. Cette option faisait que la géolocalisation expirait ou faisait planter l'application.

5
Xeningem

Ça marche parfaitement dans le mien. La seule modification que j'ai apportée était dans StyleSheet.

container: {
    position: 'absolute',
    height : SCREEN_HEIGHT,
    width : SCREEN_WIDTH,
    justifyContent: 'flex-end',
    alignItems: 'center',
}

Par la suite, cela rend ma position. Vous pouvez ajouter un marqueur après cela pour montrer votre position.

1
Harsh Vishnoi

C'est ce qui a fonctionné pour moi. la troisième option est ce qui créait le problème.

navigator.geolocation.getCurrentPosition() =>{

},
 err => {

},
{ enableHighAccuracy: false, timeout: 20000}, //this worked for me
0
Speedy11