谷歌地圖API-在信息窗口上顯示具有距離的替代路線

Question

我正在使用谷歌地圖，我有點卡在一點。我想爲我的源和目標點顯示替代路線。目前我正在使用完美工作的代碼並顯示正確的結果，但唯一的問題是此代碼顯示所有具有距離和時間的路線的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爲所有路線

基於代碼片段，你提供的，已經for loop迭代的response.routes。在這裏，我看到你已經設置的InfoWindow（顯示距離和時間）的基礎上，route：

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是最後路線？如果是這樣，你可能不會正確地將其設置到地圖上。所以我環顧四周，發現這個JSFiddle Sample我可以試試看是否可以顯示多個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。從答案：

可以使用可選的DirectionsRendererOptions結構在創建DirectionsRenderer時指定線的顏色。

下面是答案的一部分代碼段：

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

我嘗試過了，這是怎麼看起來像：

[路徑不同顏色截圖] [2]

您如何設置每條路線的顏色取決於您。 希望這有助於。祝你好運。:)

PS：包括註釋中的截圖鏈接*