Question

我在react-google-maps库中使用了示例。

Pseudo-code:
1) Get string Array of all dates
2) Parse Dates into numbers
3) Verify Ordering: isASC or isDESC

TS functions:
1) strArr = (elems) => elems.map(async elem => await elem.getText());
2) strToNumArr = (strArr) => strArr.map(Date.parse); // npm i date-and-time --save

3) get ordering() {
      return {
         isASC: (strToNumArr: number[]) => strToNumArr.reduce((prev, current) => prev <= current, strToNumArr[0]);
         },
         isDESC: (strToNumArr: number[]) => strToNumArr.reduceRight((prev, current) => prev <= current, strToNumArr[0]);
         },
       };
    }

我想在地图中启用替代路线。所以我用了

sudo mysql -u root
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'YOUR_PASSWORD_HERE';
FLUSH PRIVILEGES;

mysql -u root -p # and it works

所以内部回调函数

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

位于routes数组中，其中数组中的每个路由都具有此属性。非常感谢你。

Answer 1

如果您只想在地图上渲染这些路线，可以使用该库中的DirectionsRenderer。

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

但是，此DirectionsRenderer组件无法完全自定义，如定义颜色或onClick函数。你可以做的是使用Marker和Polygon创建一个自定义的Directions组件，它也来自这个库。以下是我的表现：

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;

react-google-maps中的替代路线

1 个答案: