谷歌地图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：包括注释中的截图链接*