Reactjs 如何制作像优步汽车这样的移动标记？

我创建了一个这样的标记：

import React from "react";
import config from 'config';
import { compose, withProps, withState, lifecycle } from "recompose";
import { 
  withScriptjs,
  withGoogleMap, 
  GoogleMap, 
  Marker,
  DirectionsRenderer,
  Polyline,
 } from "react-google-maps";

const googleApiKey = config.googleApiKey;

const HistoryView = compose(
  withProps({
    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&v=3.exp&libraries=geometry,drawing,places`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `345px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withState('zoom', 'onZoomChange', 11),
  withScriptjs,
  withGoogleMap,
  lifecycle({
    componentDidMount() { 
      const { historyCords } = this.props;
    },
    componentWillMount() {
      this.setState({
          zoomToMarkers: map => {
              //console.log("Zoom to markers");
              const bounds = new google.maps.LatLngBounds();
              map.props.children.forEach((child) => {
                  if (child.type === Marker) {
                      bounds.extend(new google.maps.LatLng(child.props.position.lat, child.props.position.lng));
                  }
              })
              map.fitBounds(bounds);
          }
      })
    },
  })
)(props =>
  <GoogleMap
    //ref={props.zoomToMarkers}
    defaultZoom={8}
    defaultCenter={new google.maps.LatLng(props.historyCords[0].latitude, props.historyCords[0].longitude)}
    center={new google.maps.LatLng(props.latitude, props.longitude)}
    zoom={17}
  >
    {<Polyline path={props.polylineCords}
        geodesic={true}
        options={{
            strokeColor: "#1e9494",
            strokeOpacity: 0.75,
            strokeWeight: 2,
            icons: [
                {
                    icon: "lineSymbol",
                    offset: "0",
                    repeat: "20px"
                }
            ]
        }}
    />}
    {<Marker
        options={{icon: {url: "../../public/images/red-mark.svg", scaledSize: new window.google.maps.Size(30, 62)}}}
        position={{ lat: props.latitude, lng: props.longitude }}
        onClick={props.onMarkerClick} />
    }
  </GoogleMap>
);

export { HistoryView };

从“React”导入React；
从“配置”导入配置；
从“重新组合”导入{compose，withProps，withState，lifecycle}；
导入{
用ScriptJS，
用谷歌地图，
谷歌地图，
标记，
方向，
多段线，
}从“谷歌地图反应”；
const googleApiKey=config.googleApiKey；
const HistoryView=compose(
用道具({
谷歌地图网址：`https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&v=3.exp&libraries=geometry，drawing，places`，
加载元素：，
集装箱运输：，
mapElement:，
}),
带状态（'zoom'，'onZoomChange'，11），
用ScriptJS，
用谷歌地图，
生命周期({
componentDidMount（）{
const{historyCords}=this.props；
},
组件willmount（）{
这是我的国家({
zoomToMarkers:map=>{
//console.log（“缩放到标记”）；
const bounds=new google.maps.LatLngBounds（）；
map.props.children.forEach（（child）=>{
if（child.type==标记）{
extend（新的google.maps.LatLng（child.props.position.lat，child.props.position.lng））；
}
})
映射边界（bounds）；
}
})
},
})
)（道具=>
{}
{
}
);
导出{HistoryView}；

现在，如何在位置更新时像汽车一样移动此标记？ 我使用状态来更新标记的位置，但它不会设置动画。我该怎么做

我的问题是，当一个latlng被更新时，标记从一个地方跳到另一个地方，但我希望它像汽车一样移动。你有没有在网上追踪过优步？差不多吧

---

有什么解决办法吗？我正在寻找类似的功能