Question

我现在正在制作一个项目，使用Google Direction Service API获取预计到达时间，并在Google地图上的两个位置显示一条线。

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

问题是每次我点击它创建新线的标记。我希望它被新的起源和目的地的新线所取代。

在再次调用Direction Service 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

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

在请求路线的功能之外声明服务器和渲染器，然后每次单击标记时，在发出新路径请求之前清除路线。

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

   // 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 Direction Service API创建的道路上的行？

2 个答案: