Question

我使用以下代码但没有成功：

// NativeBase容器内部

        <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]}
        />

//在类的componentDidMount内部

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

);

但是发生了一个错误，说没有这样的函数animateToCoordinate。

Answer 1

我有一些问题，其中this.refs是未定义的，除非我在构造函数中将对此的引用绑定到我正在使用this.refs的函数。在您的情况下，请尝试：

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

}

虽然仍然可以使用字符串引用，但我相信这是遗留的，所以我也将MapView引用更新为更新的方式。请参阅：Ref Example

Answer 2

在我的情况下，我使用 animateToCoordinate() ，如下所示，它对我有用：

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

Answer 3

不幸的是，现在不赞成animateToCoordinate，如果要执行同样的操作，则应改用animateCamera或animateToRegion。

"/bootstrap/jquery-3.2.1.slim.min.js"

}

Answer 4

这是一个解决方案。

const animateToCoordinat = (lat, long) => {
  mapView?.animateCamera({
    center: {
      latitude: lat,
      longitude: long,
    },
    duration: {
      1000,
    }
  });
}

https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md#:~:text=current%20camera%20configuration.-,animateCamera,-camera%3A%20Camera%2C%20%7B%20duration

您也可以使用 setCamera 方法。

React-Native-Maps：如何设置动画来协调？

4 个答案: