如何让Marker在react-native-maps中平滑移动？

Question

我有一个 API 来获取汽车在 react-native-maps.

中的位置

[
  {
    "Message": "OK",
    "NumberPlate": "*****",
    "DeviceID": "60000660",
    "DriverName": "",
    "DriverLicense": "",
    "Date": "08:10:00 - 10/01/2022",
    "Lt": "latitude",
    "Ln": "longitude",
    "Address": "***, ***, ***",
    "Angle": 285,
    "CarStatus": "parking",
    "Speed": 0,
    "Acc": "off",
    "Oil": 323
  },
  .....
]

为了防止服务器崩溃，我每15秒才获取一次数据。众所周知，我的汽车会在地图上“跳跃”。

那么有没有什么办法可以让他们顺利的移动呢？

例如他们会在15秒内在2点之间直线移动

这是我的<MapView />

<MapView
  ref={mapRef}
  style={{width: '100%', height: '100%'}}
  initialRegion={{
    latitude: mapState.lat,
    longitude: mapState.long,
    latitudeDelta: 0.01,
    longitudeDelta: 0.01,
  }}
  onPress={() => {
    menuRef.current.snapTo(1);
    vehiclesRef.current.snapTo(2);
  }}
  showsUserLocation={true}
  showsTraffic={false}
  showsMyLocationButton={true}
  zoomEnabled={true}>
  {CarInfo.map(car => {
    return (
      <Marker
        key={car.DeviceID}
        coordinate={{
          latitude: car.Lt,
          longitude: car.Ln,
        }}
        onPress={() => vehiclesRef.current.snapTo(1)}>
        <Animated.View style={[styles.markerWrap]}>
          <Text style={styles.numberPlate} numberOfLines={1}>
            {car.NumberPlate}
          </Text>
          <Animated.Image
            source={Car}
            style={styles.marker}
            resizeMode="cover"
          />
        </Animated.View>
      </Marker>
    );
  })}
</MapView>

Answer 1

如果你使用react-native-maps Marker，你可以看到this并关注他。有用。如果你想显示多个标记并且希望它们平滑移动，你应该自定义一个子组件并在return()中使用I。这是我的代码：

export default function CarMarker({car, onOpen}) {
  const [marker, setMarker] = useState(null);
  const [coordinate, setCoordinate] = useState(
    new AnimatedRegion({
      latitude: car.Lt || INITIAL_LAT,
      longitude: car.Ln || INITIAL_LONG,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    }),
  );

  useEffect(() => {
    animateMarker();
  }, [car]);

  const animateMarker = () => {
    const newCoordinate = {
      latitude: car.Lt,
      longitude: car.Ln,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA,
    };

    if (Platform.OS === 'android') {
      if (marker) {
        marker.animateMarkerToCoordinate(newCoordinate, 15000);
      }
    } else {
      coordinate.timing(newCoordinate).start();
    }
  };

  return (
    <Marker.Animated
      key={car.DeviceID}
      ref={marker => {
        setMarker(marker);
      }}
      coordinate={coordinate}
      anchor={{x: 0.5, y: 0.5}}
      onPress={onOpen}>
      <Animated.View style={styles.markerWrap}>
        <Text style={styles.numberPlate} numberOfLines={1}>
          {car.NumberPlate}
        </Text>
        <Animated.Image source={Car} style={styles.marker} resizeMode="cover" />
      </Animated.View>
    </Marker.Animated>
  );
}

这是我的 <MapView/>

<MapView
  ref={mapRef}
  style={{width: '100%', height: '100%'}}
  initialRegion={{
    latitude: mapState.lat,
    longitude: mapState.long,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA,
  }}
  onPress={() => {
    menuRef.current.snapTo(1);
    vehiclesRef.current.snapTo(2);
  }}
  showsUserLocation={true}
  showsTraffic={false}
  showsMyLocationButton={true}
  zoomEnabled={true}>
  {CarInfo.map(car => {
    return (
      <CarMarker
        key={car.DeviceID}
        car={car}
        onOpen={() => {
          vehiclesRef.current.snapTo(1);
          setSelectedVehicle(car);
        }}
      />
    );
  })}
</MapView>

如何让Marker在react-native-maps中平滑移动？

How to make the Marker move smoothly in react-native-maps?

react-native

maps

react-native-maps