我以前遇到过这个问题，这将对您有所帮助：
首先，您需要在 DirectionsRenderer.js 文件中将 waypoints 和 optimizeWaypoints 键添加到 directionsService.route
之后，您需要将此键绑定到项目中的DirectionsRenderer 组件，并且您需要在组件文件中创建一个名为 waypnt 的数组，并将所有Destination 点和stopover: true 键按如下方式：
this.waypnt.push({
location: { lat: marker.lat, lng: marker.lng },
stopover: true,
});
看看这个：
DirectionsRenderer.js
import { MapElementFactory } from "vue2-google-maps";
export default MapElementFactory({
name: "directionsRenderer",
ctr() {
return window.google.maps.DirectionsRenderer;
},
events: [],
mappedProps: {},
props: {
origin: { type: [Object, Array] },
destination: { type: [Object, Array] },
waypoints: {type: Array},
travelMode: { type: String },
optimizeWaypoints: {type: Boolean}
},
afterCreate(directionsRenderer) {
let directionsService = new window.google.maps.DirectionsService();
this.$watch(
() => [this.origin, this.destination, this.travelMode, this.waypoints, this.optimizeWaypoints],
() => {
let { origin, destination, travelMode, waypoints, optimizeWaypoints } = this;
if (!origin || !destination || !travelMode || !waypoints) return;
directionsService.route(
{
origin,
destination,
travelMode,
waypoints,
optimizeWaypoints,
},
(response, status) => {
if (status !== "OK") return;
directionsRenderer.setDirections(response);
}
);
}
);
},
});
MapContainer.vue
<template>
<div class="hello">
<h1 class="mb-4">Map Project</h1>
<div class="row">
<div class="col-md-9">
<!-- Adding Company Location: start -->
<div class="company-location">
<b-form>
<b-input-group class="mb-3">
<GmapAutocomplete @place_changed="originPoint" />
<b-input-group-append class="ms-2">
<b-button class="btn-success" @click="addOriginPoint">
Add Location
</b-button>
</b-input-group-append>
</b-input-group>
</b-form>
</div>
<!-- Adding Company Location: end -->
<!-- Map Container: start -->
<GmapMap :center="center" :zoom="12" map-type-id="terrain" class="map">
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
@click="center = m.position"
/>
<DirectionsRenderer
travelMode="DRIVING"
:origin="startLocation"
:destination="endLocation"
:waypoints="waypnt"
:optimizeWaypoints="true"
/>
</GmapMap>
<!-- Map Container: end -->
</div>
<div class="col-md-3">
<!-- Add passenger' Name & Loacation: start -->
<b-form>
<b-form-group
label="passenger's Name"
label-for="passengerName"
class="my-3 text-start"
>
<b-form-input
id="passengerName"
type="text"
placeholder="passenger's name"
value=""
required
></b-form-input>
</b-form-group>
<b-form-group
label="passenger's Location"
label-for="passengerLocation"
class="my-3 text-start"
>
<GmapAutocomplete
id="passengerLocation"
@place_changed="setPlace"
/>
</b-form-group>
<b-button class="btn btn-success w-100" @click="addDestinationPoint">
Get Direction
</b-button>
</b-form>
<!-- Add passengers's Name & Loacation: end -->
</div>
</div>
<div class="row">
<div class="col-md-8">
<!-- data table: start -->
<div class="mt-4">
<h3>Employees table</h3>
<table class="table">
<thead>
<tr>
<th>Employee name</th>
<th>Trip duration</th>
<th>Pickup point order</th>
</tr>
</thead>
<tbody>
<dataTable />
</tbody>
</table>
</div>
<!-- data table: end -->
</div>
</div>
</div>
</template>
<script>
import DirectionsRenderer from "./DirectionsRenderer";
export default {
name: "MapContainer",
data() {
return {
center: { lat: 41.04538761823768, lng: 28.990736439754617 },
currentPlace: null,
originPlace: null,
markers: [],
destinationPlaces: [],
originPlaceLocation: [],
path: [],
passengers: [],
startLocation: null,
endLocation: null,
waypnt: [],
};
},
methods: {
setPlace(place) {
this.currentPlace = place;
},
originPoint(originPoint) {
this.originPlace = originPoint;
},
addDestinationPoint() {
const passengerName = document.getElementById("passengerName").value;
if (this.currentPlace || this.destinationPlaces.length <= 7) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng(),
};
const passengerInfo = {
name: passengerName,
pickUpPoint: marker,
};
this.markers.push({ position: marker });
this.path.push({ lat: marker.lat, lng: marker.lng });
this.destinationPlaces.push(this.currentPlace);
this.passengers.push({ passengerInfo });
console.log(this.passengers);
this.center = marker;
this.currentPlace = null;
this.endLocation = marker;
this.waypnt.push({
location: { lat: marker.lat, lng: marker.lng },
stopover: true,
});
} else {
alert("You are allowed to add 8 passenger only!");
}
},
addOriginPoint() {
if (this.originPlace && this.originPlaceLocation.length == 0) {
const originMarker = {
lat: this.originPlace.geometry.location.lat(),
lng: this.originPlace.geometry.location.lng(),
};
this.markers.push({ position: originMarker });
this.path.push({ lat: originMarker.lat, lng: originMarker.lng });
this.originPlaceLocation.push({ position: originMarker });
this.center = originMarker;
this.startLocation = originMarker;
} else {
alert(
"You have alrady added an origin place! if you want to change it please reload the window"
);
}
},
},
components: {
DirectionsRenderer,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.map {
width: 100%;
height: 400px;
}
</style>
有关更多信息，请查看以下内容：
https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints#maps_directions_waypoints-javascript