我編寫了這部分程式碼來在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
我以前遇到過這個問題,這會對您有所幫助:
首先,您需要將
waypoints
和optimizeWaypoints
鍵新增至 DirectionsRenderer.js 檔案中的directionsService.route
之後,您需要將此鍵綁定到專案中的DirectionsRenderer
元件,並且需要在元件檔案中建立一個名為 waypnt 的數組,並將所有Destination
點和 ##