Implémentation de Vue.js pour générer plusieurs directions d'arrêt sur Google Maps

Question

J'ai écrit cette partie du code pour afficher les directions sur Google Maps Mais pour l'instant je n'ai que les positions de début et de fin Je veux avoir plus d'arrêts et rendre l'itinéraire aussi bon que possible Comment puis-je saisir plusieurs arrêts ? C'est ce que j'ai fait jusqu'à présent

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

Composant de direction

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

Et ma fonction

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

Jusqu’à présent, je vais bien, tout va bien, mais j’ai besoin de faire plus d’arrêts D'après ce que vous pouvez voir, je n'ai qu'une seule variable au final Comment dois-je procéder ? Puis-je m'adapter au code actuel ?

Answer 1

J'ai déjà eu ce problème et ceci va m'aider :

Tout d'abord, vous devez waypoints 和 optimizeWaypoints 键添加到 DirectionsRenderer.js 文件中的 directionsService.route Après cela, vous devez lier cette clé à la clé DirectionsRenderer 组件，并且需要在组件文件中创建一个名为 waypnt 的数组，并将所有 Destination 点和 stopover: true de votre projet que vous appuyez dessus comme ceci :

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

Regardez ceci :

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

Pour plus d'informations, consultez : https://developers.google.com/maps/docs/javascript/examples/directions-waypoints#maps_directions_waypoints-javascript