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 ）。因此，我将继续前进并尝试解决您的评论中的问题。

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);下方添加如上所示的代码段，它将显示如下内容：

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

路线应不同颜色

对于这个问题，我发现了一篇类似的帖子here。从答案：

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

以下是答案中片段的一部分：

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

我试了一下，这就是它的样子：

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

如何设置每条路线的颜色取决于您。希望这可以帮助。祝好运。：）

PS：评论中包含屏幕截图链接。*

Google地图API-显示信息窗口上距离的替代路线

1 个答案: