谷歌地图 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 用于所有路线

根据您提供的代码 sn-p，for loop 已经迭代了 response.routes。在这里，我看到您已经根据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 是用于 last 路线吗？如果是这样，您可能没有将其正确设置到地图上。所以我环顾四周，发现了这个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); 下方添加上面一样的代码 sn-p 就会显示如下内容：

[多个InfoWindow地图截图][1]

1. 路线应该是不同的颜色

对于这个问题，我找到了一个类似的帖子here。来自答案：

您可以在创建 DirectionsRenderer 时指定线条的颜色，使用可选的 DirectionsRendererOptions 结构体。

这是答案中 sn-p 的一部分：

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

我试了一下，结果是这样的：

[路由不同颜色截图][2]

不过，如何设置每条路线的颜色取决于您。 希望这可以帮助。祝你好运。 :)

PS：在 cmets 中包含屏幕截图链接。*