使用谷歌地图API渲染到地图上时无法获得替代路线

时间:2018-04-17 20:05:43

标签: javascript google-maps-api-3 google-geocoder google-geocoding-api

我正在为我的大学开发一个项目,并且在尝试获取路线替代方案时我被困住了。 drawMainRoute函数绘制来自给定源和目的地的路线没有问题,但我希望路线服务也为我提供备用路线。

根据谷歌地图API,它说,如果我将provideRouteAlternatives设置为true,那么这应该允许我获取从源到目的地的所有路由。

以下是相同[https://developers.google.com/maps/documentation/javascript/reference/3.exp/directions#DirectionsRequest.provideRouteAlternatives]

的链接

我还尝试将其更改为JS文件中的“alternative:true”,但是当我这样做时,它从未绘制过路线。并在控制台上发现了一个例外。

这是我的JS代码供参考。

            function drawHeatMap() {
                heatmap = new google.maps.visualization.HeatmapLayer({
                    data: getPoints(),
                    map: map,
                    radius: 15
                });
            }

            function drawMainRoute() {
                //disableMap();
                drawHeatMap();
                var dirRenderer = new google.maps.DirectionsRenderer({ suppressMarkers: true });
                var request = {
                    origin: setStart(),
                    destination: setEnd(),
                    provideRouteAlternatives: true,
                    travelMode: google.maps.TravelMode.DRIVING
                };
                dirService.route(request, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        dirRenderer.setDirections(result);
                    }
                });

                dirRenderer.setMap(map);
            }

1 个答案:

答案 0 :(得分:0)

找到了一种方法。我们必须遍历找到的路线并使用DirectionsRenderer单独设置路线。

这是相同的代码。

function drawMainRoute() {
                //disableMap();
                drawHeatMap();
                var dirRenderer = new google.maps.DirectionsRenderer({ suppressMarkers: true });

                dirService.route({
                    origin: setStart(),   //yaha start kuch bhi daal sakte, direct string. lat lng ya google.map.place object
                    destination: setEnd(), //yaha stop
                    provideRouteAlternatives: true,
                    travelMode: 'DRIVING'
                }, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        for (var i = 0; i < response.routes.length; i++) {
                            var dr = new google.maps.DirectionsRenderer();
                            dr.setDirections(response);
                            // Tell the DirectionsRenderer which route to display
                            dr.setRouteIndex(i);
                            dr.setMap(map);
                        }
                    }
                });

                dirRenderer.setMap(map);
            }