Wie man Karten erstellt, die automatische Lokalisierung in React-Native entdecken

Question

Ich habe Karten in reaktiven nativen bezogen auf https://github.com/lelandrichardson/react-native-maps Karte erstellt, aber ich möchte automatische Ortung mit GPS zu erkennen. Hier ist der Code, der die Karte mit statischer Breite und Länge darstellt. Hier ist mein aktualisierter Code. Aber es immer noch nicht perfekt Ort

getInitialState() { 
    return { 
     initialPosition: 'unknown', 
     lastPosition: 'unknown', 
    }; 
    }, 

    componentDidMount() { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     var initialPosition = JSON.stringify(position); 
     this.setState({initialPosition}); 
     }, 
     {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
    ); 
    this.watchID = navigator.geolocation.watchPosition((position) => { 
     var lastPosition = JSON.stringify(position); 
     this.setState({lastPosition}); 
    }); 
    }, 

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

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
      ref="map" 
      mapType="terrain" 
      style={styles.map} 
      initialPosition={this.state.initialPosition} 
      lastPosition={this.state.lastPosition} 
     > 
     </MapView> 
     </View> 

können Sie bitte korrigieren Sie es?

Vielen Dank im Voraus

Answer 1

Sie tun können, dass die Verwendung von React-native Geolocation:
https://facebook.github.io/react-native/docs/geolocation.html

Es ist schon ein gutes Beispiel gibt, wie Sie das tun können:

componentDidMount: function() { 
    navigator.geolocation.getCurrentPosition(
    (position) => { 
     var initialPosition = JSON.stringify(position); 
     this.setState({initialPosition}); 
    }, 
    (error) => alert(error.message), 
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
); 
    this.watchID = navigator.geolocation.watchPosition((position) => { 
    var lastPosition = JSON.stringify(position); 
    this.setState({lastPosition}); 
    }); 
} 

Sie habe jetzt die initialPosition (Längen- und Breitengrad), benutze sie anstelle deines fest codierten Wertes. Die watchPosition ruft den Erfolgsrückruf auf, sobald sich der Standort ändert.

Ich benutze dies derzeit, um lokale Restaurants in unserer App zu finden.

---

Aktualisiert Antwort:

Ich verwende Genymotion Emulator dies auszuführen. Wenn Sie diesen Code auch auf Genymotion ausführen möchten, stellen Sie bitte sicher, dass Sie Google Play-Unterstützung installiert haben, sonst reagiert reactive-native-maps nicht. Sie müssen diesen Schritt nicht ausführen, wenn Sie ein physisches Gerät verwenden.

https://github.com/codepath/android_guides/wiki/Genymotion-2.0-Emulators-with-Google-Play-support

In Bezug auf Geolokalisierung, stellen Sie sicher, dass Sie ACCESS_FINE_LOCATION Erlaubnis im AndroidManifest.xml hinzugefügt haben:

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

Andernfalls erhalten Sie eine Fehlermeldung erhalten: „Sieht aus wie die App doesn‘ Ich habe die Erlaubnis, auf den Standort zuzugreifen. "

Stellen Sie außerdem sicher, dass Ihr GPS/Wifi/Daten aktiviert ist, andernfalls kann Ihr Gerät Ihren aktuellen Standort nicht abrufen.

var React = require('react'); 
var ReactNative = require('react-native'); 
var { 
    StyleSheet, 
    PropTypes, 
    View, 
    Text, 
    Dimensions, 
    TouchableOpacity, 
} = ReactNative; 

var MapView = require('react-native-maps'); 

var { width, height } = Dimensions.get('window'); 
const ASPECT_RATIO = width/height; 

// (Initial Static Location) Mumbai 
const LATITUDE = 19.0760; 
const LONGITUDE = 72.8777; 

const LATITUDE_DELTA = 0.01; 
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO; 

var CustomMap = React.createClass({ 
    getInitialState() { 
    return { 
     region: { 
     latitude: LATITUDE, 
     longitude: LONGITUDE, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA 
     }, 
    }; 
    }, 

    componentDidMount: function() { 
    navigator.geolocation.getCurrentPosition(
     (position) => { 
     this.setState({ 
      region: { 
      latitude: position.coords.latitude, 
      longitude: position.coords.longitude, 
      latitudeDelta: LATITUDE_DELTA, 
      longitudeDelta: LONGITUDE_DELTA 
      } 
     }); 
     }, 
     (error) => alert(error.message), 
     {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} 
    ); 

    this.watchID = navigator.geolocation.watchPosition((position) => { 
     const newRegion = { 
     latitude: position.coords.latitude, 
     longitude: position.coords.longitude, 
     latitudeDelta: LATITUDE_DELTA, 
     longitudeDelta: LONGITUDE_DELTA 
     } 

     this.onRegionChange(newRegion); 
    }); 
    }, 

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

    onRegionChange(region) { 
    this.setState({ region }); 
    }, 

    render() { 
    return (
     <View style={styles.container}> 
     <MapView 
      ref="map" 
      mapType="terrain" 
      style={styles.map} 
      region={this.state.region} 
      onRegionChange={this.onRegionChange} 
     > 
     </MapView> 
     <View style={styles.bubble}> 
      <Text style={{ textAlign: 'center'}}> 
      {`${this.state.region.latitude.toPrecision(7)}, ${this.state.region.longitude.toPrecision(7)}`} 
      </Text> 
     </View> 
     </View> 
    ); 
    }, 
}); 

var 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, 
    }, 
    bubble: { 
    backgroundColor: 'rgba(255,255,255,0.7)', 
    paddingHorizontal: 18, 
    paddingVertical: 12, 
    borderRadius: 20, 
    }, 
}); 

module.exports = CustomMap; 

den obigen Code ausführen, sollten Sie mit Ihrem aktuellen Standort überschrieben ursprüngliche statische Position (Mumbai) aus der Vorrichtung durch componentDidMount wenn getCurrentPosition genannt wird feststellen, dass.

Wenn Sie Änderungen in der Position verfolgen, verwenden watchPosition in Kombination mit onRegionChange, sonst, wenn Sie nur die Ausgangsposition watchPosition Schritt erhalten müssen entfernen.