GoogleマップAPI-距離情報ウィンドウの代替ルートを表示

Question

私はGoogleマップを使用していますが、私はちょっと立ち往生しています。ソースと目的地の代替ルートを表示したい。現在、私は完全に動作して正しい結果を表示しているコードを使用していますが、唯一の問題はこのコードが距離と時間のあるすべてのルートに対してinfowindowを表示していることです。代替ルートのために色分けする必要があります。

私を助けてください。

var request = { 
       origin: source, 
       destination: destination, 
       travelMode: google.maps.TravelMode.DRIVING, 
       provideRouteAlternatives: true, 
       optimizeWaypoints 
       unitSystem: google.maps.UnitSystem.METRIC 
      }; 
      directionsService.route(request, 
       function(response, status) { 
        if (status == google.maps.DirectionsStatus.OK) {      
        var step=2; 
         for (var i = 0, len = response.routes.length; i < len; i++) { 
          new google.maps.DirectionsRenderer({ 
           map: mapObject, 
           directions: response, 
           routeIndex: i 
          });       
          stepDisplay.setContent(response.routes[i].legs[i].steps[step].distance.text + "<br>" + response.routes[i].legs[i].steps[step].duration.text + " "); 
      stepDisplay.setPosition(response.routes[i].legs[i].steps[step].end_location); 
      stepDisplay.open(mapObject); 
         } 
        } else { 
         $("#error").append("Unable to retrieve your route<br />"); 
        } 

       }); 

Answer 1

私は同じくらい私は（本当にそれはJSを経験していない）可能性があるので、あなたのコードを分析しました。だから私は先に進んで、あなたのコメントに対する懸念に対処しようとしています。 ため

1. InfoWindowコードに基づいて、すべてのルート

をあなたは、response.routesオーバーfor loopすでに繰り返し処理を提供スニペット。ここでは、私はあなたがすでにrouteに基づいて、InfoWindow（示す距離と時間）を設定している参照してください。

stepDisplay.setContent(response.routes[i].legs[i].steps[step].distance.text + "<br>" + response.routes[i].legs[i].steps[step].duration.text + " "); 
stepDisplay.setPosition(response.routes[i].legs[i].steps[step].end_location); 
stepDisplay.open(mapObject); 

- それは私はあなたがまだ問題としてこれを指定した理由を不思議ました。それからそれは私に当たった、InfoWindowここに示されているのはの最後ののルートですか？もしそうなら、マップに正しく設定していないかもしれません。だから私は周りを見回してを見つけました。複数の場合はInfoWindowsを表示することができます。私はちょうどあなたがそうのようなInfoWindowが含まれるコードを追加：

directionsDisplay.setDirections(response); 
      var step = 1; 
      var infowindow2 = new google.maps.InfoWindow(); 
      infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " "); 
      infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location); 
      infowindow2.open(map); 

を - あなたは上記のJSFiddleサンプルを開いたときに、ちょうどdirectionsDisplay.setDirections(response);下に、上記のようなコードスニペットを追加し、それがこのようなものが表示されます：

[複数の情報ウィンドウマップのスクリーンショット] [1]

ルート線は異なる色

なければなりません

この懸念事項については、同様の投稿hereが見つかりました。答え：

DirectionsRendererの作成時に、オプションのDirectionsRendererOptions構造体を使用して、線の色を指定できます。ここで

は答えでスニペットの一部です：

directionsDisplay = new google.maps.DirectionsRenderer({ 
    polylineOptions: { 
     strokeColor: "red" 
    } 
    }); 

私はそれを試してみた、これはそれのように見えた方法です：

[ルート異なる色のスクリーンショット] [2]

どのように各ルートの色を設定するかはあなた次第です。 これが役立つことを願っています。がんばろう。:)

PS：コメント欄でのスクリーンショットのリンクを含ま*