如何在Google地图上删除以前的路线? [英] How can I delete previous route on google maps?

问题描述

目前，我可以使用Google Maps API绘制替代路线.但是绘制完第一条路线后，我遇到了一个小问题.例如下面的第一条路线(冬季-新墨西哥州中心)

Currently I can draw alternative routes by using Google Maps API. But I've a little problem after drawing first route. For example the first route below(Winters-New Mexico Center)

绘制完第一个之后，我想绘制Midland-Albuquerque.但是第一条路线仍然出现在地图上

After drawing the first, I want to draw Midland - Albuquerque. But first route still appears on the map

我尝试将代码块添加到renderDirections()来解决它，但我认为该代码块仅适用于单个路由:

I've tried to add a code block to renderDirections() to solve it but I think that code block works only for single routes:

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

}

如何在绘制第二条路线之前删除第一条路线?这是所有的JS代码:

How can I delete the first route before drawing the second ? Here are all of the JS code:

    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);
        }

    });
}

推荐答案

保留对所有 DirectionsRenderer 对象的引用，并将它们的地图属性 all 设置为 null.

Keep references to all the DirectionsRenderer objects and set all of their map properties to 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);
}

概念证明小提琴

这篇关于如何在Google地图上删除以前的路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！