Question

目前，我可以使用Google Maps API绘制替代路线。但是在绘制第一条路线后我有点问题。例如下面的第一条路线（温特斯 - 新墨西哥中心）

画完第一张后，我想画米德兰 - 阿尔伯克基。但第一条路线仍然出现在地图上

我试图为renderDirections（）添加一个代码块来解决它，但我认为代码块只适用于单个路由：

if(directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;

}

如何在绘制第二条路线之前删除第一条路线？以下是所有JS代码：

    function renderDirections(result, rendererOptions, routeToDisplay)
{

    if(routeToDisplay==0)
    {
        var _colour = '#008bff';
        var _strokeWeight = 4;
        var _strokeOpacity = 1.0;
        var _suppressMarkers = false;
    }
    else
    {
        var _colour = '#444753';
        var _strokeWeight = 4;
        var _strokeOpacity = 0.7;
        var _suppressMarkers = false;
    }
        directionsDisplay = new google.maps.DirectionsRenderer({
            draggable: false, 
            suppressMarkers: _suppressMarkers, 
            polylineOptions: { 
                strokeColor: _colour, 
                strokeWeight: _strokeWeight, 
                strokeOpacity: _strokeOpacity  
                }
            });
        directionsDisplay.setMap(map);
        directionsDisplay.setDirections(result);
        directionsDisplay.setRouteIndex(routeToDisplay);

}

function requestDirections(start, end, travel_mode, directionsService,directionsDisplay, routeToDisplay, main_route) {

    directionsService.route({
      origin: {'placeId': start},
      destination: {'placeId': end},
      travelMode: travel_mode,
      provideRouteAlternatives: main_route
    }, function(result, status) {

      if (status === google.maps.DirectionsStatus.OK)
    {

            if(main_route)
            {
                var rendererOptions = getRendererOptions(true);
                for (var i = 0; i < result.routes.length; i++)
                {
                        renderDirections(result, rendererOptions, i);
                }


            }
            else
            {
                var rendererOptions = getRendererOptions(false);
                renderDirections(result, rendererOptions, routeToDisplay);

            }



        }
        else{
            window.alert('Şu nedenden dolayı herhangi bir yol bulunamadı: ' + status);
        }

    });
}

Answer 1

保留对所有DirectionsRenderer个对象的引用，并将其地图属性的全部设置为null。

function requestDirections(start, end, routeToDisplay, main_route) {
    // remove any old renderers from the map
    for (var i = 0; i < directionsRenderers.length; i++) {
        directionsRenderers[i].setMap(null);
    }
    // clear out the directionsRenderers array
    directionsRenderers = [];

    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        provideRouteAlternatives: main_route
    };

    directionsService.route(request, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            if (main_route) {
                var rendererOptions = getRendererOptions(true);
                for (var i = 0; i < result.routes.length; i++) {
                    renderDirections(result, rendererOptions, i);
                }
            } else {
                var rendererOptions = getRendererOptions(false);
                renderDirections(result, rendererOptions, routeToDisplay);
            }
        }
    });
}

function renderDirections(result, rendererOptions, routeToDisplay) {

    if (routeToDisplay == 0) {
        var _colour = '#00458E';
        var _strokeWeight = 4;
        var _strokeOpacity = 1.0;
        var _suppressMarkers = false;
    } else {
        var _colour = '#ED1C24';
        var _strokeWeight = 4;
        var _strokeOpacity = 0.7;
        var _suppressMarkers = false;
    }

    // create new renderer object
    var directionsRenderer = new google.maps.DirectionsRenderer({
        draggable: false,
        suppressMarkers: _suppressMarkers,
        polylineOptions: {
            strokeColor: _colour,
            strokeWeight: _strokeWeight,
            strokeOpacity: _strokeOpacity
        }
    })
    directionsRenderer.setMap(map);
    directionsRenderer.setDirections(result);
    directionsRenderer.setRouteIndex(routeToDisplay);

    // push new renderer onto directionsRenderers array;
    directionsRenderers.push(directionsRenderer);
}

proof of concept fiddle

Answer 2

试试这个：

directionsDisplay.setMap(null);

您可以在此处查看示例代码http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html

Answer 3

我遇到了同样的问题，我通过在每次抽奖之前重新初始化谷歌地图来解决这个问题。

       map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: { lat: 24.549798, lng: 46.5473599 }
        });

如何在谷歌地图上删除以前的路线？

3 个答案: