Альтернативные маршруты в реакции-Google-карты

Question

Я использую пример в библиотекеact-google-maps.

const { compose, withProps, lifecycle } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  DirectionsRenderer,
} = require("react-google-maps");

const MapWithADirectionsRenderer = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap,
  lifecycle({
    componentDidMount() {
      const DirectionsService = new google.maps.DirectionsService();

      DirectionsService.route({
        origin: new google.maps.LatLng(41.8507300, -87.6512600),
        destination: new google.maps.LatLng(41.8525800, -87.6514100),
        travelMode: google.maps.TravelMode.DRIVING,
      }, (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result,
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      });
    }
  })
)(props =>
  <GoogleMap
    defaultZoom={7}
    defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
  >
    {props.directions && <DirectionsRenderer directions={props.directions} />}
  </GoogleMap>
);

<MapWithADirectionsRenderer />

Я хочу включить альтернативные маршруты на своей карте.Поэтому я использовал

provideRouteAlternatives: true

, поэтому внутри функции обратного вызова

(result, status) => { }

у результата есть свойство route, которое является массивом альтернативных маршрутов.Как я могу сделать эти маршруты на карте?.. Я также хочу нажимать на маршруты, и они будут менять цвет с активного на неактивный.Когда пользователь выбирает маршрут, мне нужно отправить на сервер свойство, называемое

overview_polyline

, которое находится внутри массива маршрутов, где каждый маршрут внутри массива имеет это свойство.Большое спасибо.

Answer 1

Если вы хотите отобразить только эти маршруты на карте, вы можете использовать DirectionsRenderer из этой библиотеки.

https://tomchentw.github.io/react-google-maps/#directionsrenderer

Однако этот компонент DirectionsRenderer нельзя полностью настроить, например, определяяцвета или функции onClick.То, что вы могли бы сделать, это создать настраиваемый компонент Directions с использованием Marker и Polygon, которые также взяты из этой библиотеки.Вот как я это сделал:

import React, { Component } from 'react';
import { Polyline, Marker } from 'react-google-maps';
import { pinkA200, blue500 } from 'material-ui/styles/colors';
import ntol from 'number-to-letter';
import _ from 'lodash';

const DirectionMarker = ({ data, isEnd, i, onClick }) => {
    const { start_location, end_location } = data;
    if (isEnd) {
        return [
            <Marker onClick={onClick} position={start_location} label={ntol(i)} key="end0" />,
            <Marker onClick={onClick} position={end_location} label={ntol(i + 1)} key="end1" />
        ];
    }
    return <Marker onClick={onClick} position={start_location} label={ntol(i)} />;
};      

const Direction = ({ direction, isEnd, i, onClick, isSelected }) => {
    const data = direction.routes[0].legs[0];
    const path = data.steps.reduce((sum, current) => _.concat(sum, current.path), []);
    return [
        <DirectionMarker data={data} onClick={onClick} isEnd={isEnd} i={i} key="marker" />,
        <Polyline
        onClick={onClick}
        path={path}
        options={{
            strokeColor: isSelected ? pinkA200 : blue500,
            strokeOpacity: 0.6,
            strokeWeight: 6
        }}
        key="line"
        />
    ];
};

class Directions extends Component {
    constructor(props) {
        super(props);
        this.state = { selectedSegment: 0 };
    }

    render() {
        const { directions } = this.props;
        if (_.isEmpty(directions)) {
            return false;
        }
        return directions.map((d, i) => {
            const directionProps = {
                direction: d,
                i,
                key: i,
                onClick: () => this.setState({ selectedSegment: i }),
                isEnd: i === directions.length - 1,
                isSelected: i === this.state.selectedSegment
            };
            return <Direction {...directionProps} />;
        });
    }
}

export default Directions;