Извлечение маршрутов из Карт Google

Question

Я показываю список мест на карте, используя google places api. Пользователи могут получать указания по каждому из этих мест по отдельности. На карте видны направления, и все работает, но каждый раз, когда они направляются в другое место, он добавляет его к карте вместе со старым (-ыми). Я хочу переписать существующие направления на карте при выборе нового места. Таким образом, только один набор направлений появляется в любое время. В идеале, мне нужен только один маршрут, обозначенный на карте, и один список отображаемых направлений.

Я попытался добавить следующее, чтобы очистить все направления, прежде чем я поставил новые:

directionDisplay = new google.maps.DirectionsRenderer(); 
directionDisplay.suppressMarkers = true; 
directionDisplay.setMap(null); 

Как предложено здесь: Google Maps Version 3 Remove directions markers, но безрезультатно.

Независимо от того, сколько поисковых запросов и поиска по документации я просто не могу понять.

Любая помощь была бы принята с благодарностью.

JA

Answer 1

Нет необходимости очищать указатели перед их рендерингом.

Используйте 1 глобальную переменную для направленияDisplay, текущие направления будут удалены, как только вы вызываете setDirections(), чтобы визуализировать новые направления.

Answer 2

// in the global scope 
var directions = []; 

document.getElementById('submit').addEventListener('click', function() { 
if (directions && directions.length > 0) { 
    for (var i=0; i<directions.length; i++) 
    directions[i].setMap(null); 
    } 
    directions = []; 
    calculateAndDisplayRoute(directionsService, markerArray, stepDisplay, map, true, "SUBWAY"); 
}); 


function calculateAndDisplayRoute(directionsService,markerArray, stepDisplay, map, is_transit, transit_mode) { 
      //var selectedMode = "TRANSIT"; 
      // First, remove any existing markers from the map. 
      for (var i = 0; i < markerArray.length; i++) { 
       markerArray[i].setMap(null); 
      } 

      if (is_transit == true){ 
       var request = { 
        origin: {lat: start_lat, lng: start_lon}, 
        destination: {lat: end_lat, lng: end_lon}, 
        travelMode: google.maps.TravelMode.TRANSIT, 
        transitOptions: { 
         modes: [google.maps.TransitMode[transit_mode]], 
        }, 
        provideRouteAlternatives: true 
       }; 
      }else{ 
       var request = { 
        origin: {lat: start_lat, lng: start_lon}, 
        destination: {lat: end_lat, lng: end_lon}, 
        travelMode: google.maps.TravelMode[transit_mode], 
        provideRouteAlternatives: true 
       }; 
      } 


      // Retrieve the start and end locations and create a DirectionsRequest using 

      directionsService.route(request, function(response, status) { 
       // Route the directions and pass the response to a function to create 
       console.log(response) 
       console.log(response.routes[0]) 

       var polyline = new google.maps.Polyline({ 
        strokeColor: '#6855C9', 
        strokeOpacity: 1, 
        strokeWeight: 7 
       }); 

       if (status == google.maps.DirectionsStatus.OK) { 
        for (var i = 0, len = response.routes.length; i < len; i++) { 

         directions.push(new google.maps.DirectionsRenderer({ 
          map: map, 
          directions: response, 
          routeIndex: i , 
          suppressMarkers: true 
         })); 

         //showSteps(response, markerArray, stepDisplay, map); 
        } 
       } else { 
        window.alert('Directions request failed due to ' + status); 
       } 



      }); 
     }