vue.jsでgooglemapsAPIを使って交通情報を取得する

#vue.jsでgooglemapsAPIを使って交通情報を取得する

##やりたいこと
現在vue.jsで複数拠点の交通情報を取得しようとしています。
ですが、交通情報は二拠点の間しか取れないので
A => B => C => D => F
と言う順番に回る経路があったとしたら
A => B
B => C
C => D
D => G
と言う風に交通情報を取得しようと思います。
それが以下のコードです。

##コード
wayPoint.dataには拠点の緯度・経度が配列で入っています。

vue.js
1      var legs
2      var $this              = this
3      var directionsService  = new this.$google.maps.DirectionsService
4 
5      for (var i = 0; i <= wayPoint.data.length; i++){       
6        if (i === 0) { // 初回
7          origin = $this.startLocation
8          destination = wayPoint.data[i].location
9        } else if (i === wayPoint.data.length) { // 最後
10          origin = wayPoint.data[i - 1].location
11          destination = {lat: 35.6016919, lng: 139.7348444}
12        } else { // それ以外
13          origin = wayPoint.data[i - 1].location
14          destination = wayPoint.data[i].location
15        } 
16
17      directionsService.route({
18        origin: origin, // 出発地
19        destination: destination, // 到着地 東京品川病院
20        avoidHighways: true, // 高速は利用しない
21        travelMode: 'DRIVING', // 車モード
22        drivingOptions: {
23          departureTime: new Date('2020/03/10 09:00:00'),
24          trafficModel: $this.$google.maps.TrafficModel.BEST_GUESS
25        }
26      },
27      (response, status) => {
28        if (status !== 'OK') {
29          window.alert('Directions request failed due to ' + status)
30          return
31        }     
32        legs = response.routes[0].legs
33        console.log(legs);
34        })
35      }

##おこっていること
二拠点での交通情報はresponseから取得できるのですが、拠点毎にデータ処理する時間が違うのか順番通りにresponseが返ってきません。

B => C
A => B
・
・
・

の順番に返ってくることもあれば

D => G
C => D
・
・
・

と言う風に返ってくることがあります。

正規の拠点順にresponseを返すにはどうしたらいいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

一つの解決策としてですが、、、
directionService の処理を Promise でラップする関数を作った方がやりやすい気がします！

function directionServicePromise(origin, destination) {
    return new Promise((resolve, reject) => {
            directionsService.route({
                    origin: origin, // 出発地
                    destination: destination, // 到着地 東京品川病院
                    avoidHighways: true, // 高速は利用しない
                    travelMode: 'DRIVING', // 車モード
                    drivingOptions: {
                        departureTime: new Date('2020/03/10 09:00:00'),
                        trafficModel: $this.$google.maps.TrafficModel.BEST_GUESS
                    }
                },
                (response, status) => {
                    if (status !== 'OK') {
                        window.alert('Directions request failed due to ' + status)
                        reject()
                    }
                    legs = response.routes[0].legs
                    console.log(legs);
                    resolve(legs)
                })
        }
    })
}

Promise でラップさえすれば、順番に1つずつ処理していくことも簡単ですし、Promise.allを用いて処理が全て終わるまで待つこともできます！

投稿2020/03/11 08:40