我编写了这部分代码，用于在谷歌地图上显示方向但现在我只有起点和终点我想多停靠几站，尽可能地把路线改好如何进入多个站点？这就是我到现在为止所做的
<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)
},
所以到目前为止我一切都很好，一切都很顺利，但我需要更多的停留据你所见，我最后只有一个变量我该如何继续？我能适应当前的代码吗？
我以前遇到过这个问题，这将帮助您：
首先，您需要在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