Как сделать движущийся маркер, как автомобили Uber? - PullRequest
Новая
       22

Как сделать движущийся маркер, как автомобили Uber?

1 голос
/ 27 мая 2019

Я создаю маркер следующим образом: 

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

Теперь, как мне переместить этот маркер, как автомобиль, при обновлении местоположения?Я использую состояния, чтобы обновить положение маркера, но он не анимируется.Как мне это сделать?

Моя проблема заключается в том, что при обновлении latlng маркер перемещается из одного места в другое, но я хочу, чтобы он двигался как машина.Вы когда-нибудь отслеживали поездку Uber в Интернете?что-то в этом роде.

GIF для автомобильной анимации

...