用于在 Google 地图上生成多个停止方向的 Vue.js 实现

Question

我编写了这部分代码来在谷歌地图上显示方向 但目前我只有开始和结束位置 我想要有更多的站点并让路线尽可能好 如何输入多个停靠点？ 到目前为止我就是这么做的

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

所以到目前为止我一切都很好，一切都进展顺利，但我需要有更多的停留 从你所看到的我最后只有一个变量 我该如何继续？ 我可以适应当前的代码吗？

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

sssccc

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