Vue.js-Implementierung zum Generieren mehrerer Haltestellenanweisungen auf Google Maps

Question

Ich habe diesen Teil des Codes geschrieben, um Wegbeschreibungen auf Google Maps anzuzeigen Aber aktuell habe ich nur die Start- und Endpositionen Ich möchte mehr Stopps einlegen und die Route so gut wie möglich gestalten Wie gebe ich mehrere Haltestellen ein? Das habe ich bisher gemacht

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

Richtungskomponente

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

Und meine Funktion

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

Bis jetzt geht es mir gut, alles läuft gut, aber ich muss noch mehr Stopps einlegen Wie Sie sehen können, habe ich am Ende nur eine Variable Wie gehe ich vor? Kann ich mich an den aktuellen Code anpassen?

Answer 1

我以前遇到过这个问题，这会对您有所帮助：

首先，您需要将 waypoints 和 optimizeWaypoints 键添加到 DirectionsRenderer.js 文件中的 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

有关更多信息，请查看： https://developers.google.com/maps/文档/javascript/examples/directions-waypoints#maps_directions_waypoints-javascript