如何在react-google-maps中添加标记移动动画？

Question

如何在 React 应用程序中实现标记移动动画。我已经将react-google-maps用于谷歌地图。

我正在浏览该库和 Google 地图 API 的文档。Google Maps API 中有一个偏移选项。但我不是在寻找那个。

该应用程序将通过 socket.io 服务器接收更新的坐标。一旦坐标到达，标记就需要移动，就像 Uber 应用程序一样。

GitHub上有一个未解决的问题，尚未关闭。

目前，我可以移动坐标更新上的标记，但没有动画。

示例代码

import React, { Component } from 'react';
import Socket from 'socket.io-client';
import { withRouter } from 'react-router-dom';
import {
    GoogleMap,
    withScriptjs,
    withGoogleMap,
    Marker
} from 'react-google-maps';

import { googleMapsUrl, socketUrl } from '../../../config/constants';

const io = Socket(socketUrl('dev'));

class GoogleMaps extends Component {
    constructor(props) {
        super(props);
        this.state = {
            defaultCenter: {
                clientId: "FAKE_CLIENT_ID",
                imei:     "FAKE_IMEI_NUMBER",
                lat:      28.554907,
                lng:      77.554385,
                name:     "FAKE_NAME"
            },
            defaultZoom:  10,
            movingMarker: [],
            AllMarkers:   []
        };
        this.pullDataFromSocket = this.pullDataFromSocket.bind(this);
        this.createMovingMarker = this.createMovingMarker.bind(this);
    }

    componentDidMount() {
        this.pullDataFromSocket();
    }

    pullDataFromSocket() {
        const pathname = this.props.location.pathname.replace(/\//, '');

        io.on('data', data => {
            const markerCoordinates = data.devicedatalist.map(ds => {
                // Some valude modification
                return {
                    ...ds
                }
            });

            const movingMarker = this.state.movingMarker;
            movingMarker.push(markerCoordinates[0]);

            this.setState({
                AllMarkers:    markerCoordinates,
                defaultCenter: markerCoordinates[0],
                movingMarker
            });
        });
    }

    createMovingMarker() {
        let MarkerLocation = this.state.defaultCenter;
        if (this.state.movingMarker.length > 1) {
            /**
            * Setting the marker to the updated new location
            */
            MarkerLocation = this.state.movingMarker[this.state.movingMarker.length - 1];
        }

        return (
            <Marker
                position={MarkerLocation}
            >
            </Marker>
        );
    }

    render() {
        return(
            <GoogleMap
                defaultZoom={this.state.defaultZoom}
                center={this.state.defaultCenter}
            >
                {this.createMovingMarker()}
            </GoogleMap>
        )
    };
}

const MapWrapper = withRouter(
    withScriptjs(
        withGoogleMap(GoogleMaps)
    )
);

export default () => {
    return (
        <MapWrapper
            googleMapURL={googleMapsUrl()}
            loadingElement={<div />}
            mapElement={<div style={{height: '100vh'}} />}
            containerElement={<div />}
        />
    )
};