用於在 Google 地圖上產生多個停止方向的 Vue.js 實現
我編寫了這部分程式碼來在Google地圖上顯示方向 但目前我只有開始和結束位置 我想要有更多的站點並讓路線盡可能好 如何輸入多個停靠點？ 到目前為止我就是這麼做的
<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)
},
所以到目前為止我一切都很好%E
