如果您有一个坐标数组并希望在地图中显示显示这些坐标的方向，则需要将 设置first coordinate为 your start、 the last coordinateas thedestination和 the coordinates in betweento be your waypoints。
然后，一旦您将在数组中添加一个新坐标，您需要在您的航点中包含上一个最后一个坐标，并将新添加的坐标作为目的地。
这是一个示例代码，显示了我在其中使用 Google Place Autocomplete 的地方，您可以在其中输入一个地点，它会提供建议，然后一旦您从建议中选择一个地点，它将获得它的坐标并将坐标推送到数组中。
请看下面的代码片段：
import React, { Component } from "react";
import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
import "./style.css";
import "./config";
export class MapContainer extends Component {
onMapReady = (mapProps, map) => {
let coords = [];
let waypoints = [];
//put data from config file in an array
{
places.map((place) => coords.push({ lat: place.lat, lng: place.lng }));
}
//instantiate directions service and directions renderer
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
//put directions renderer to render in the map
directionsDisplay.setMap(map);
//Getting the first coordinate in the array as the start/origin
let start = { lat: coords[0].lat, lng: coords[0].lng };
//Getting the last coordinate in the array as the end/destination
let end = {
lat: coords[coords.length - 1].lat,
lng: coords[coords.length - 1].lng,
};
//putting all the coordinates between the first and last coordinate from the array as the waypoints
for (let i = 1; i < coords.length - 1; i++) {
waypoints.push({
location: { lat: coords[i].lat, lng: coords[i].lng },
stopover: true,
});
}
// directions requests
let request = {
origin: start,
waypoints: waypoints,
destination: end,
travelMode: "DRIVING",
};
//show results in the directionsrenderer
directionsService.route(request, function (result, status) {
if (status == "OK") {
directionsDisplay.setDirections(result);
}
});
//setting the autocomplete input
let card = document.getElementById("pac-card");
let input = document.getElementById("pac-input");
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
let autocomplete = new google.maps.places.Autocomplete(input);
// Bind the map's bounds (viewport) property to the autocomplete object,
// so that the autocomplete requests use the current map bounds for the
// bounds option in the request.
autocomplete.bindTo("bounds", map);
// Set the data fields to return when the user selects a place.
autocomplete.setFields(["address_components", "geometry", "icon", "name"]);
//listener for the places input
autocomplete.addListener("place_changed", function () {
console.log(waypoints);
let place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
//Putting the previous last coordinate in the array to be part of the waypoint
waypoints.push({
location: {
lat: coords[coords.length - 1].lat,
lng: coords[coords.length - 1].lng,
},
stopover: true,
});
//putting the Place Autocomplete coordinate result in the coords array
coords.push({
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
});
//putting the Place Autocomplete coordinate result the value of the end/destination
end = place.geometry.location;
//changing request
request = {
origin: start,
waypoints: waypoints,
destination: end,
travelMode: "DRIVING",
};
//creating new directions request
directionsService.route(request, function (result, status) {
if (status == "OK") {
directionsDisplay.setDirections(result);
}
});
});
};
render() {
//if (!this.props.loaded) return <div>Loading...</div>;
return (
<div>
<Map
className="map"
initialCenter={{ lat: 14.6091, lng: 121.0223 }}
google={this.props.google}
onClick={this.onMapClicked}
onReady={this.onMapReady}
style={{ height: "100%", position: "relative", width: "100%" }}
zoom={8}
></Map>
<div className="pac-card" id="pac-card">
<div>
<div id="title">Add new point</div>
<div id="pac-container">
<input
id="pac-input"
type="text"
placeholder="Enter a location"
/>
</div>
</div>
</div>
<div style={{ width: 500, height: 500 }} id={this.props.id} />
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon" />
<span id="place-name" className="title"></span>
<br />
<span id="place-address"></span>
<br />
<span id="place-coord"></span>
</div>
</div>
);
}
}
export default GoogleApiWrapper({
apiKey: "YOUR_API_KEY",
version: "3.40",
})(MapContainer);