谷歌地图多方向路线

Question

嗨，我想在同一张地图中指向2个方向，但是我的代码已经显示了1by1这条路线，单击不起作用，如果我第二次单击按钮，那么第二条路线已经显示出我需要用1单击来解决此问题

<button @click="getDirection">get direction</button> export default {  created() {},   data() {
    return {
      center: { lat: 41.043999, lng: 29.002001 },
      showMap: true,
      listPos: [
        {
          arriveeLat: 48.784,
          arriveeLng: 2.2743419,
          departLat: 48.9016,
          departLng: 2.29873
        },
        {
          arriveeLat: 48.8245306,
          arriveeLng: 2.40735,
          departLat: 48.799815,
          departLng: 2.257289
        }
      ],
      coords: {
        lat: 41.043999,
        lng: 29.002001
      },
      stop: {
        lat: 41.047283,
        lng: 29.0256
      },

      destination: {
        lat: 40.980141,
        lng: 29.08227
      },

      markers: [],
      places: [],
      currentPlace: null
    }   },   methods: {   getDirection: function() {
      let map = this.$refs.gmap.$mapObject
      debugger
      // this.$refs.gmap.$mapObject

      var directionsService = new google.maps.DirectionsService()

      var directionsDisplay = new google.maps.DirectionsRenderer({
        map: map,
        preserveViewport: true
      })
      debugger

      directionsDisplay.setMap(map)

      // google maps API's direction service
      let calculateAndDisplayRoute = (
        directionsService,
        directionsDisplay,
        startPoint,
        endPoint
      ) => {
        debugger

        directionsService.route(
          {
            origin: startPoint,

            destination: endPoint,

            travelMode: 'DRIVING',

            drivingOptions: {
              departureTime: new Date(),
              trafficModel: 'pessimistic'
            }
          },
          (response, status) => {
            if (status === 'OK') {
              response.routes.forEach(e => {
                var bounds = new google.maps.LatLngBounds()
                bounds.union(e.bounds)
                map.fitBounds(bounds)
                e.legs.forEach(c => {
                  console.log(c)
                  console.log(
                    c.end_address +
                      ' - ' +
                      c.distance.text +
                      ' - ' +
                      c.duration.text
                  )
                })
              })

              directionsDisplay.setDirections(response)
            } else {
              console.log('Directions request failed due to ' + status)
            }
          }
        )
      }

      console.log(this.coords)
      console.log(this.destination)
      for (var i = 0; i < this.listPos.length; i++) {
        debugger
        var startPoint = new google.maps.LatLng(
          this.listPos[i]['departLat'],
          this.listPos[i]['departLng']
        )
        var endPoint = new google.maps.LatLng(
          this.listPos[i]['arriveeLat'],
          this.listPos[i]['arriveeLng']
        )

        calculateAndDisplayRoute(
          directionsService,
          directionsDisplay,
          startPoint,
          endPoint
        )
      }
    } }