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

Question

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

我在 GMaps 上有一个标记，单击它会触发方向服务查询，将标记的位置作为起点，将地名的静态值作为目的地。

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

在再次调用方向服务 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 );
     }
   });

请大家帮忙。非常感谢！

Answer 1

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

在请求路由的函数之外声明 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.

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

Answer 2

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

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

How to remove the line on the road created by Google Direction Service API?

javascript

google-maps

google-maps-api-3