我编写了这部分代码来在谷歌地图上显示方向 但目前我只有开始和结束位置 我想要有更多的站点并让路线尽可能好 如何输入多个停靠点？ 到目前为止我就是这么做的
<table>
<tr>
<th>Start</th>
<th><GmapAutocomplete @place_changed="setPlace" /></th>
<th style="width: 50%;"><button class="btn" @click="addMarker(0)">Add</button></th>
</tr>
<tr>
<th>End</th>
<th><GmapAutocomplete @place_changed="setPlace" /></th>
<th style="width: 50%;"><button class="btn" @click="addMarker(1)">Add</button></th>
</tr>
</table>
方向组件
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] },
travelMode: { type: String },
},
afterCreate(directionsRenderer) {
console.log(1)
let directionsService = new window.google.maps.DirectionsService();
this.$watch(
() => [this.origin, this.destination, this.travelMode],
() => {
let { origin, destination, travelMode } = this;
if (!origin || !destination || !travelMode) return;
directionsService.route(
{
origin,
destination,
travelMode,
},
(response, status) => {
if (status !== "OK") return;
// eslint-disable-next-line no-debugger
//debugger
directionsRenderer.setDirections(response);
}
);
}
);
},
});
<DirectionsRenderer
travelMode="DRIVING"
:origin="startLocation"
:destination="endLocation"
/>
还有我的功能
setPlace(place) {
this.currentPlace = place;
},
addMarker(index) {
const marker = {
lat: this.currentPlace.geometry.location.lat(),
lng: this.currentPlace.geometry.location.lng(),
};
if (index === 0) this.startLocation = marker;
if (index === 1) this.endLocation = marker;
this.center = marker;
console.log(this.startLocation, this.endLocation)
},
所以到目前为止我一切都很好，一切都进展顺利，但我需要有更多的停留 从你所看到的我最后只有一个变量 我该如何继续？ 我可以适应当前的代码吗？
我以前遇到过这个问题，这会对您有所帮助：
首先，您需要将
waypoints和optimizeWaypoints键添加到 DirectionsRenderer.js 文件中的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
有关更多信息，请查看： https://developers.google.com/maps/文档/javascript/examples/directions-waypoints#maps_directions_waypoints-javascript