Pelaksanaan Vue.js untuk menjana berbilang arah perhentian pada Peta Google

Question

Saya menulis bahagian kod ini untuk menunjukkan arah pada peta google Tetapi pada masa ini saya hanya mempunyai kedudukan permulaan dan penamat Saya mahu mempunyai lebih banyak perhentian dan membuat laluan sebaik mungkin Bagaimanakah saya boleh memasuki berbilang perhentian? Itulah yang saya lakukan setakat ini

<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>

Komponen arah

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"
      />

Dan fungsi saya

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)
    },

Setakat ini saya baik-baik saja, semuanya berjalan lancar, tetapi saya perlu melakukan lebih banyak perhentian Daripada apa yang anda boleh lihat, saya hanya mempunyai satu pembolehubah pada akhirnya Bagaimana saya meneruskan? Bolehkah saya menyesuaikan diri dengan kod semasa?

Answer 1

Saya pernah mengalami masalah ini sebelum ini dan ini akan membantu:

Pertama, anda perlu waypoints 和 optimizeWaypoints 键添加到 DirectionsRenderer.js 文件中的 directionsService.route Selepas itu anda perlu mengikat kunci ini pada kunci DirectionsRenderer 组件，并且需要在组件文件中创建一个名为 waypnt 的数组，并将所有 Destination 点和 stopover: true dalam projek anda yang anda tolak ke atasnya seperti ini:

this.waypnt.push({
      location: { lat: marker.lat, lng: marker.lng },
      stopover: true,
    });

Lihat ini:

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

sssccc

Untuk maklumat lanjut, semak: https://developers.google.com/maps/docs/javascript/examples/directions-waypoints#maps_directions_waypoints-javascript