Vue.js接入Google Maps实现多途经点路线规划的改造方案咨询

完全可以在现有代码基础上改造，具体操作如下：

修改后的组件代码如下，核心是新增途经点相关入参，同步传入Google Directions API：

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 },
    // 新增途经点参数
    waypoints: { type: Array, default: () => [] },
    // 新增是否自动优化路线参数
    optimizeWaypoints: { type: Boolean, default: false }
  },
  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) return;
        directionsService.route(
          {
            origin,
            destination,
            travelMode,
            // 传入途经点，stopover表示该点为停留点
            waypoints: waypoints.map(point => ({location: point, stopover: true})),
            // 开启途经点自动优化，生成最优路线
            optimizeWaypoints
          },
          (response, status) => {
            if (status !== "OK") return;
            directionsRenderer.setDirections(response);
          }
        );
      }
    );
  },
});

在原有起点终点表格中新增途经点录入行、新增/删除途经点按钮：

<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 v-for="(point, idx) in waypoints" :key="idx">
    <th>途经点{{idx + 1}}</th>
    <th><GmapAutocomplete @place_changed="place => setWaypointPlace(place, idx)" /></th>
    <th style="width: 50%;">
      <button class="btn" @click="deleteWaypoint(idx)">删除</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>
  <!-- 新增途经点按钮 -->
  <tr>
    <th colspan="3">
      <button class="btn" @click="addWaypointRow">新增途经点</button>
    </th>
  </tr>
</table>

在页面data中新增途经点状态，配套对应处理函数：

// data中新增状态
data() {
  return {
    // 原有其他状态保留，新增如下
    waypoints: []
  }
},
methods: {
  // 原有方法保留，新增如下方法
  // 保存单个途经点
  setWaypointPlace(place, idx) {
    const marker = {
      lat: place.geometry.location.lat(),
      lng: place.geometry.location.lng(),
    };
    this.waypoints.splice(idx, 1, marker);
  },
  // 新增空的途经点录入行
  addWaypointRow() {
    this.waypoints.push(null);
  },
  // 删除指定途经点
  deleteWaypoint(idx) {
    this.waypoints.splice(idx, 1);
  },
  // 原有setPlace、addMarker方法无需修改
  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;
  },
}

传入途经点参数，开启最优路线优化：

<DirectionsRenderer
  travelMode="DRIVING"
  :origin="startLocation"
  :destination="endLocation"
  <!-- 过滤掉未录入的空途经点 -->
  :waypoints="waypoints.filter(p => p)"
  <!-- 开启自动优化路线 -->
  :optimizeWaypoints="true"
/>

• Google Maps Directions API免费配额下最多支持8个途经点，企业配额最多支持23个
• 开启optimizeWaypoints: true后，返回结果会自带waypoint_order字段，标记优化后的途经点顺序，可按需展示给用户

内容的提问来源于stack exchange，提问作者KoulJak