Reactjs 谷歌地图在单到多条路线之间切换

嗨，伙计们，我正在开发旅游应用程序，我试图使单路线到多路线之间的切换正常工作。 如果阵列布线中只有2个点，则使用多个布线功能-我将在地图上看到点“A”和点“C”。 如果有2个以上的点，地图将按比例显示这些点。 如果有帮助的话，这里是repo：

但现在唯一的一条路线正在运行，地图上显示的是A点和B点，

---

但是，当添加另一个点（数组中的3条路线）时，地图将点A和点B显示为C，当向数组中添加另一条路线（4条路线）时，地图将得到修复。

在您的用例中，如果您通过一条路线（2个坐标）和多条路线（3个或更多坐标），您希望代码自动处理方向路线。如果阵列通过2个坐标，则地图应显示路线起点和终点的A点和C点，而如果阵列具有3个或更多坐标，则地图应显示A、B、C

下面是一个（将API密钥添加到工作中）和代码片段，显示了此用例。有关更多信息，请参阅内联注释。注意：我使用json文件传递坐标数组

Map.js

/*global google*/
import ReactDOM from "react-dom";
import React from "react";

import { GoogleMap, DirectionsRenderer } from "@react-google-maps/api";

//use routes3.json for multiple coordinates inarray
//use routes2.json for only 2 coordinates in array
import routes from "./routes3.json";

//console.log(routes)

const defaultLocation = { lat: 40.756795, lng: -74.954298 };
let directionsService;
class Map extends React.Component {
  state = {
    directions: null,
    bounds: null
  };

  onMapLoad = map => {
    directionsService = new google.maps.DirectionsService();

    const routesCopy = routes.map(route => {
      return {
        location: { lat: route.location.lat, lng: route.location.lng },
        stopover: true
      };
    });

    const origin =
      routesCopy.length === 1
        ? new google.maps.LatLng(
            routesCopy[0].location.lat,
            routesCopy[0].location.lng
          )
        : routesCopy.shift().location;
    const destination =
      routesCopy.length === 1
        ? new google.maps.LatLng(
            routesCopy[0].location.lat,
            routesCopy[0].location.lng
          )
        : routesCopy.pop().location;
    //put all the remaining coordinates in waypoints after(pop and shift)
    const waypoints = routesCopy;

    console.log(origin, destination, waypoints);
    //call getDirection function
    this.getDirection(origin, destination, waypoints);
  };

  //function that is calling the directions service
  getDirection = (origin, destination, waypoints) => {
    //this will check if there is a waypoint meaning the array  has 3 or more coordinates
    waypoints.length >= 1
      ? directionsService.route(
          {
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING,
            waypoints: waypoints
          },
          (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
              //changing the state of directions to the result of direction service
              this.setState({
                directions: result
              });
            } else {
              console.error(`error fetching directions ${result}`);
            }
          }
        )
      : directionsService.route(
          {
            origin: origin,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
          },
          (result, status) => {
            if (status === google.maps.DirectionsStatus.OK) {
              //changing the state of directions to the result of direction service
              this.setState({
                directions: result
              });
            } else {
              console.error(`error fetching directions ${result}`);
            }
          }
        );
  };

  render() {
    return (
      <div>
        <GoogleMap
          center={defaultLocation}
          zoom={3}
          onLoad={map => this.onMapLoad(map)}
          mapContainerStyle={{ height: "400px", width: "800px" }}
        >
          {this.state.directions !== null && (
            <DirectionsRenderer directions={this.state.directions} />
          )}
        </GoogleMap>
      </div>
    );
  }
}

export default Map;

routes3.json

[{"location": {
  "id": "ID of FIrst Place",
  "lat":40.756795,
  "lng":-73.954298
}},
{"location": {
  "id": "ID of Second Place",
  "lat":40.753167,
  "lng":-73.968120
}}]

[{"location": {
  "id": "ID of FIrst Place",
  "lat":40.756795,
  "lng":-73.954298
}},
{"location": {
  "id": "ID of Second Place",
  "lat":40.753167,
  "lng":-73.968120
}},
{"location": {
  "id": "ID of Third Place",
  "lat":40.853167,
  "lng":-73.968120
}}]

---

做得好！非常感谢：）

[{"location": {
  "id": "ID of FIrst Place",
  "lat":40.756795,
  "lng":-73.954298
}},
{"location": {
  "id": "ID of Second Place",
  "lat":40.753167,
  "lng":-73.968120
}}]

[{"location": {
  "id": "ID of FIrst Place",
  "lat":40.756795,
  "lng":-73.954298
}},
{"location": {
  "id": "ID of Second Place",
  "lat":40.753167,
  "lng":-73.968120
}},
{"location": {
  "id": "ID of Third Place",
  "lat":40.853167,
  "lng":-73.968120
}}]