React-Native-Maps：如何动态移动到指定坐标？

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函数。

- Diego Penteado

Answer 1

很遗憾，现在 animateToCoordinate 已经被弃用了。如果你想要做到同样的效果，应该使用 animateCamera 或 animateToRegion 代替。

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

}

- Masoud

---

animateToRegion需要提供latitudeDelta和longitudeDelta参数。另一方面，animateCamera不需要这些参数，所以在不追踪缩放值的情况下会更容易使用。例如：_mapView.animateCamera({ center: { latitude, longitude }})。 - nymo

Answer 2

我遇到过一些问题，就是当我在使用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}
          />
    );

}

虽然使用字符串 refs 仍然可行，但我相信这已经是过时的了，因此我还更新了 MapView ref 到更新的方式。参见：Ref Example

- Matthew Corway

---

如何在地图底部而非中心位置显示标记？ - Mag

Answer 3

在我的情况下，我使用了 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>
      )
  }

- Dinith Minura

Answer 4

以下是我的解决方案，因为之前提供的方法对我没有用：

import MapView from 'react-native-maps';
import React, { useRef } from "react";

const defaultRegion = {
latitude: 59.9139, 
longitude: 10.7522,
latitudeDelta: 0.0922/1,
longitudeDelta: 0.0521/1
}

const newLocation = {
latitude: 2.0469,
longitude: 45.3182
}

const MapScreen = () => {

const mapViewRef = useRef(null);

return (
    <View style={styles.mapContainer}>

        <MapView ref={ mapViewRef } style={styles.map} initialRegion = { defaultRegion } >

          ...

        </MapView>

        <TouchableOpacity style={styles.button} onPress = {() => mapViewRef.current.animateToRegion( newLocation, 1000)} >
            <Text>Move Location</Text>
        </TouchableOpacity>

    </View>
  );
};

主要要点：

1. const mapViewRef = useRef(null);
2. ref={ mapViewRef }
3. onPress = {() => mapViewRef.current.animateToRegion( newLocation, 1000)}

- far1din

Answer 5

这里有一个解决方案。

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 方法。

- Castor

Answer 6

在我的案例中，我使用了Animate Camera功能，我使用了<MapView.Animated/>，这个组件生成了一个很酷的动画...

<MapView.Animated
    provider = { Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT } // remove if not using Google Maps
    style = { styles_l.map }       
    ref = {(map) => (this.map = map)}
    initialRegion = { this.state.region }
    followsUserLocation = { true}
    showsCompass = { true}
    showsUserLocation = { true}
    onRegionChange = {() => this.handleChangeRegion }
    onRegionChangeComplete = {() => this.handleChangeRegion.bind(this) }>
</MapView.Animated >

这个组件将调用这个函数：

handleChangeRegion = (region) => {
    this.map.animateCamera({ center: region });
}

我希望这也能对你有所帮助，这是一个非常好的组件！而且非常实用，祝贺那些参与其中的人。

- Deividson Calixto