Question

我创建一个这样的标记：

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 for car animation

如何制作像Uber汽车这样的移动标记？

0 个答案: