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

我现在正在做一个项目，它使用Google Direction Service API获取预计到达时间，并在Google地图的两个地方显示一条线

我在GMAP上有一个标记，点击它会触发一个方向服务查询，得到标记的位置作为原点，地点名称的静态值作为目的地

问题是每次单击标记时，它都会创建新线。我希望它被新的起点和终点的新线路所取代

在再次调用方向服务API之前，我找不到任何方法先删除该行

单击标记时调用setDirection（）方法

function setDirection ( marker ) {
  start = marker.getPosition( );
  //start=localStorage.getItem("positionLatLng");
  end = 'Liceo de Cagayan university';
  directionService();

}

function directionService( ) {
   var directionsService = new google.maps.DirectionsService();
   var directionsDisplay = new google.maps.DirectionsRenderer(); 
   directionsDisplay.setMap( map );
   directionsDisplay.setOptions( { suppressMarkers: true } );
   directionsDisplay.setPanel( document.getElementById('panel') );

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

函数设置方向（标记）{
start=marker.getPosition（）；
//start=localStorage.getItem（“positionLatLng”）；
end=‘卡加扬大学许可证’；
directionService（）；
}
函数方向服务（）{
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
方向显示.setMap（地图）；
设置选项（{suppressMarkers:true}）；
directionsDisplay.setPanel（document.getElementById（'panel'）；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING，
优化航路点：正确
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
var summaryPanel=document.getElementById（'panel'）；
summaryPanel.innerHTML=''；
//对于每个管线，显示摘要信息。
对于（var i=0；i

---

请帮助大家。非常感谢！

看起来您每次都在创建一个新的方向服务，而不是清除旧的方向服务。因此，每次您的呼叫设置检查都会创建一个新的服务，并不断将其添加到地图中

在请求路由的函数之外声明servervice和Renderer，然后每次单击标记时，在发出新路由请求之前清除方向

将此代码放入其自己的函数中，并仅调用一次：

   // 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. 

第二步-找到你的起点和终点

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

功能方向服务（开始、结束）
{
//清除旧方向显示（如果存在）
//在提出新要求之前
//***这就是你错的地方***
如果（方向显示！=null）
{
directionsDisplay.setMap（空）；
方向显示=空；
}
var请求=
{
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING，
优化航路点：正确
};
//提出请求
路由（请求、功能（响应、状态）
{
if（status==google.maps.directionstatus.OK）
{
//得到你的结果
var route=response.routes[0]；
//一旦请求返回并显示结果
//现在创建一个新的方向显示，并设置方向和地图
directionsDisplay=new google.maps.DirectionsRenderer（）；
方向显示。设置方向（响应）；
directionsDisplay.setOptions(
{
对,，
地图：地图
});
//做剩下的
var summaryPanel=document.getElementById（'panel'）；
summaryPanel.innerHTML=''；
//对于每个管线，显示摘要信息。
对于（var i=0；i

编辑：

---

这里有一个JSFiddle可以帮助您：

我感谢@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 );
     }
   });

var开始、结束；
功能设置方向（标记器）{
start=marker.getPosition（）；
end=‘卡加扬大学许可证’；
directionService（）；
设置结果（）；
}
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
函数设置结果（）{
方向显示.setMap（地图）；
设置选项（{suppressMarkers:true}）；
directionsDisplay.setPanel（document.getElementById（'panel'）；
}
函数方向服务（）{
var请求={
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING，
优化航路点：正确
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
var summaryPanel=document.getElementById（'panel'）；
summaryPanel.innerHTML=''；
//对于每个管线，显示摘要信息。
对于（var i=0；i