wake-up-neo.com

Mit reaktativen Karten können Sie den aktuellen Standort, Breitengrad und Längengrad in ReactNative ermitteln

Ich entwickle einen Kartenstandort. Wenn ich auf einen bestimmten Ort klicke, bekomme ich den Breiten- und Längengrad, nicht aber den aktuellen Standort, Breitengrad und Längengrad.

Ich weiß nicht, wie ich es herausfinden kann.

Wie kann ich sie bekommen und wie kann ich den Marker an dieser Position platzieren?

Hier ist mein 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>
    )
  }
}
14
Lavaraju

Ich folgte diesen Schritten mit [email protected] und [email protected]^0.13.1 und mit [email protected] und [email protected]^0.15.2 am Datum:

Legen Sie ein mapRegion-Objekt in der state, der letzten longitude und der letzten latitude als null fest:

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

Achten Sie dann in Ihrer componentDidMount()-Funktion auf jede Änderung der aktuellen Position:

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

Wenn es Änderungen gibt, aktualisieren Sie diese in Ihrem this.state.mapRegion, übergeben Sie die tatsächlichen Koordinaten und die delta-Werte (meine können sich von Ihren unterscheiden, passen Sie sie also an):

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

Dann benötigen Sie die onRegionChange()-Funktion, mit der neue Werte für Ihre Elemente innerhalb der componentDidMount()-Funktion festgelegt werden:

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

Heben Sie die Bereitstellung der Geolocation auf componentWillUnmount() auf:

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

Und rendern Sie die MapView durch Ihr aktuelles mapRegion-Objekt. Der MapView.Marker in diesem Objekt zeigt nur die aktuelle latitude und longitude an, wenn sich diese ändern:

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

Fügen Sie das StyleSheet.absoluteFillObject für Ihre Map hinzu, um sie unter Verwendung der gesamten Breite und Höhe Ihres Geräts richtig zu rendern.

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

Sie könnten also für Ihre onPress()-Funktion etwas Ähnliches wie die onRegionChange()-Funktion tun, dh, um die tatsächlichen Koordinaten abzurufen und sie festzulegen:

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

Überprüfen Sie den vollständigen Code auf expo.io (obwohl react-native-maps nicht installiert ist).

30
Sebastian Palma

Ich empfehle Ihnen, diese offizielle Dokumentation zur Geolokalisierung zu lesen: https://facebook.github.io/react-native/docs/geolocation.html

Anschließend können Sie diese Informationen mit dem aktuellen Standort in Ihren Status setzen:

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

Als Nächstes können Sie in Ihrer Render-Methode Ihre endgültige Ansicht mit einem Marker erstellen:

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

Suchen Sie nach der Standortberechtigung mit dem folgenden Code:

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

Rufen Sie den aktuellen Breitengrad und Längengrad des Standorts mit folgendem Code ab:

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