如何删除由谷歌方向服务 API 创建的道路上的线

看起来您正在创建一个新的方向服务 evrytime 而不是清除旧的。 因此，每次调用setDorection时，它都会创建一个新服务并不断将它们添加到映射中。

函数之外声明服务器副和 rendeder，然后每次单击标记时，在发出新的路由请求之前清除方向。

将此代码放在自己的函数中，并且只调用一次：

   // Declare these outside of the function so you can access tem     
   // same as the map but assign them here
   var directionsService = new google.maps.DirectionsService();
   var directionsDisplay = new google.maps.DirectionsRenderer(); 
   directionsDisplay.setMap( map );
   directionsDisplay.setOptions( { suppressMarkers: true } );
   directionsDisplay.setPanel( document.getElementById('panel') );

编辑

以下是根据您的评论进行的更新：

步骤 1 - 声明服务和渲染器

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = null; // notice this is null for now. 

第 2 步 - 获取开始和结束

function setDirection ( marker ) 
{
    var start = marker.getPosition( );
    var end = 'Liceo de Cagayan university';
    // pass the start and end into the function
    directionService(start, end);
}

第 3 步 - 提出请求 - 注意我清除旧方向显示的位置以及在请求返回响应后我创建一个新请求的位置。

function directionService(start, end)
{
    // Clear the old directions display if it exists
    // before making a new request
    //*** this is where you are going wrong ***
    if (directionsDisplay != null)
    {
        directionsDisplay.setMap(null);
        directionsDisplay = null;
    }
    var request =
    {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING,
        optimizeWaypoints : true
    };
    // Make the request
    directionsService.route(request, function(response, status)
    {
        if (status == google.maps.DirectionsStatus.OK)
        {
            // get your results
            var route = response.routes[0];
            // Once the request comes back with the results
            // now create a new directions display and set the directions and map
            directionsDisplay = new google.maps.DirectionsRenderer();
            directionsDisplay.setDirections(response);          
            directionsDisplay.setOptions(
            {
                 suppressMarkers: true,
                 map:map
            });

            // do the rest
            var summaryPanel = document.getElementById('panel');
            summaryPanel.innerHTML = '';
            // For each route, display summary information.
            for (var i = 0; i < route.legs.length; i++)
            {
                var routeSegment = i + 1;
                eta = route.legs[i].duration.text;
            }
            // set your panel
            directionsDisplay.setPanel(document.getElementById('panel'));
        }
        else
        {
            console.log("Error: " + status);
        }
    });
}

编辑：

这里有一个JSFiddle来帮助你：http://jsfiddle.net/loanburger/qqm7n899/

我感谢@loanburger爵士的回答，这给了我解决这个问题的线索。除了他上面的答案之外，这是我的代码，它也可以运行并满足我的需要。我只是按照他的建议做了，我应该有另一个函数来设置结果。谢谢大家，享受吧！

var start , end;
function setDirection ( marker ) {
  start = marker.getPosition( );
  end = 'Liceo de Cagayan university';
  directionService();
  settingTheResult( );
}
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer(); 
function settingTheResult( ){
    directionsDisplay.setMap( map );
    directionsDisplay.setOptions( { suppressMarkers: true } );
    directionsDisplay.setPanel( document.getElementById('panel') );   
}
function directionService( ) {
   var request = {
   origin:start, 
   destination:end,
   travelMode: google.maps.TravelMode.DRIVING,
   optimizeWaypoints: true
 };
   directionsService.route(request, function(response, status) {
     if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById('panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        eta=route.legs[i].duration.text;
        }
     } else {
      console.log( "Error: " + status );
     }
   });