webentwicklung-frage-antwort-db.com.de

React-Native-Maps: Wie animiere ich um zu koordinieren?

Ich verwende den folgenden Code ohne Erfolg:

// Innerhalb des NativeBase Containers

        <MapView.Animated
           ref="map"
           style = {styles.map}
           showsUserLocation = {true}
           zoomEnabled = {true}
           showsMyLocationButton = {true}
           showsCompass = {true}
           showScale = {true}
           showsIndoors = {true}
           mapType = {this.state.mapTypes[this.state.mapTypeCode]}
        />

// Innerhalb von componentDidMount der Klasse

navigator.geolocation.getCurrentPosition(
  (position) => {
    var initialPosition = JSON.stringify(position.coords);
    this.setState({position: initialPosition});

    let tempCoords = {
      latitude: Number(position.coords.latitude),
      longitude: Number(position.coords.longitude)
    }

    this.refs.map.animateToCoordinate(tempCoords, 1);

  }, function (error) { alert(error) },

);

Es tritt jedoch ein Fehler auf, der besagt, dass es keine solche Funktion animateToCoordinate gibt.

javascriptgoogle-mapsreact-nativereact-reduxreact-native-maps
6
Diego Penteado

Ich habe einige Probleme gehabt, bei denen this.refs undefiniert ist, es sei denn, ich binde einen Verweis darauf im Konstruktor an die Funktion, in der ich this.refs verwende. Versuchen Sie in Ihrem Fall Folgendes:

constructor(props) {
    super(props);
    this._getCoords = this._getCoords.bind(this);
    this.state = {
        position: null
    };
}

componentDidMount() {
    this._getCoords();
}

_getCoords = () => {
    navigator.geolocation.getCurrentPosition(
        (position) => {
            var initialPosition = JSON.stringify(position.coords);
            this.setState({position: initialPosition});
            let tempCoords = {
                latitude: Number(position.coords.latitude),
                longitude: Number(position.coords.longitude)
            }
            this._map.animateToCoordinate(tempCoords, 1);
          }, function (error) { alert(error) },
     );
};

render() {
    return (
         <MapView.Animated
             ref={component => this._map = component}
          />
    );

}

Obwohl es immer noch möglich ist, Zeichenfolgenreferenzen zu verwenden, glaube ich, dass dies jetzt Legacy ist. Daher habe ich auch die MapView-Referenz auf die neuere Art aktualisiert. Siehe: Referenzbeispiel

8
Matthew Corway

In meinem Fall habe ichanimateToCoordinate ()wie folgt verwendet und es funktioniert für mich:

  var _mapView: MapView;

  render() {
      return ( 
        <MapView style = {styles.maps}
          ref = {(mapView) => { _mapView = mapView; }}
          initialRegion = {{
            latitude: 6.8523,
            longitude: 79.8895,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
        <TouchableOpacity 
           onPress = {() => _mapView.animateToCoordinate({
            latitude: LATITUDE,
            longitude: LONGITUDE
          }, 1000)}>
          <Text>Tap</Text>
        </TouchableOpacity>
      )
  }
8
Dinith Minura

Leider ist animateToCoordinate jetzt veraltet und wenn Sie dasselbe tun möchten, sollten Sie stattdessen animateCamera oder animateToRegion verwenden.

render() {
  return ( 
    <MapView style = {styles.maps}
      ref = {(mapView) => { _mapView = mapView; }}
      initialRegion = {{
        latitude: 6.8523,
        longitude: 79.8895,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    />
    <TouchableOpacity 
       onPress = {() => _mapView.animateToRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE
      }, 1000)}>
      <Text>Tap</Text>
    </TouchableOpacity>
  )

}

1
mdeveloper