Как правильно удалить маршруты с google map при построении новых?

Question

[Роман Татаринов]

Суть в том, что при изменении выбора одного из радиобатонов (для изменения типа движения) не удаляются маршруты, а просто рисуются новые.

const directionsService = new google.maps.DirectionsService();
    const directionsDisplay = new google.maps.DirectionsRenderer();
    let selectedMode; // переменная мода маршрута

    function checkActiveTravelMode() {
      const inp = document.getElementsByName('travelmode');
      for (let i = 0; i < inp.length; i++) {
        if (inp[i].checked) {
          const id = inp[i].getAttribute('id');
          selectedMode = id.toUpperCase();
        }
      }
    }

    function calculateAndDisplayRoute(directionsService, directionsDisplay) {
      checkActiveTravelMode();
      directionsService.route({
        origin: { placeId: start },
        destination: { placeId: end },
        travelMode: google.maps.TravelMode[selectedMode],
        transitOptions: {
          modes: ['BUS', 'RAIL', 'SUBWAY', 'TRAIN', 'TRAM'],
          routingPreference: 'FEWER_TRANSFERS',
        },
        provideRouteAlternatives: true,
      }, function (response, status) {

        directionsDisplay.setMap(null); // здесь пытаюсь очистить маршруты, но ни разу..

        if (status === 'OK') {
          const colors = ['blue', 'red', 'green', 'orange', 'yellow', 'black'];
          const responseRoutes = response.routes;
          for (let i = 0; i < responseRoutes.length; i++) {
            new google.maps.DirectionsRenderer({ // создаем новый объект, который потом не удаляется
              map: map,
              directions: response,
              routeIndex: i,
              polylineOptions: {
                strokeColor: colors[i],
                strokeWeight: 4,
                strokeOpacity: 0.5,
              },
            });
          }
        }
      });
    }

    function addPointRoute(el) {
      el.addListener('places_changed', function() {
        const places = el.getPlaces();

        if (places.length === 0) {
          return;
        }

        if (el === searchFrom) {
          start = places[0].place_id || '';
        } else {
          end = places[0].place_id || '';
        }

        if (start && end) {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        }
      });
    }

    addPointRoute(searchFrom);
    addPointRoute(searchTo);

    for (let i = 0; i < modesItem.length; i++) {
      modesItem[i].addEventListener('click', function () {
        calculateAndDisplayRoute(directionsService, directionsDisplay); // запускаем функции при изменении мода маршрута
      });
    }

Comments

[freeExec]

Так у вас вновь созданный рендер маршрута не запоминается и вы каждый раз пытаетесь удалить первый.

[Роман Татаринов]

freeExec, а как запомнить сразу все маршруты? setMap в цикле запускать?

[freeExec]

Роман Татаринов, хранить ссылки на все DirectionsRenderer

[Роман Татаринов]

freeExec, это звучит нагло, но не могу понять. Можно на примере кода?

const directionsDisplay = new google.maps.DirectionsRenderer;
    function (response, status) {
        if (status === 'OK') {
          const colors = ['blue', 'red', 'green', 'orange', 'yellow', 'black'];
          const responseRoutes = response.routes;
          for (let i = 0; i < responseRoutes.length; i++) {
            const DirectionsRendererOption = {
              directions: response,
              routeIndex: i,
              polylineOptions: {
                strokeColor: colors[i],
                strokeWeight: 4,
                strokeOpacity: 0.5,
              },
            };
            directionsDisplay.setOptions(DirectionsRendererOption);
            directionsDisplay.setMap(map);
          }
        }
      });

Я прохожусь в цикле, и создаю на каждой итерации новый объект, который добавляю на карту. При таком раскладе почему-то создается только один маршрут, который первый. Хотя если консолить directionsDisplay, то будет выводить несколько маршрутов, которые на карте не отображаются. Вы предлагаете мне как-то создавать массив и выводить его? Я просто вообще не понимаю, почему в цикле такое поведение.

[Роман Татаринов]

freeExec, также вот такой вариант выводит мне все мои маршруты. Но при этом не удаляет. Хотя я конкретно говорю ему обнулять объект directionsDisplay.

const directionsDisplay = new google.maps.DirectionsRenderer;
    if (status === 'OK') {
          if(directionsDisplay != null) {
            directionsDisplay.setMap(null);
            directionsDisplay = null;
          }
          const colors = ['blue', 'red', 'green', 'orange', 'yellow', 'black'];
          const responseRoutes = response.routes;
          for (let i = 0; i < responseRoutes.length; i++) {
            const DirectionsRendererOption = {
              directions: response,
              routeIndex: i,
              polylineOptions: {
                strokeColor: colors[i],
                strokeWeight: 4,
                strokeOpacity: 0.5,
              },
            };
            directionsDisplay = new google.maps.DirectionsRenderer(DirectionsRendererOption);
          }
          directionsDisplay.setMap(map);
        }

[freeExec]

Роман Татаринов, У вас всего одна отображалка - соответственно один маршрут.
Ваш код сводится к:

const result_color = 'bla-bla';
const colors = ['blue', 'red', 'green', 'orange', 'yellow', 'black'];
for(var color in colors) {
   result_color  = color;
}

Скажите мне, чему в итоге будет равен result_color ?

[Роман Татаринов]

freeExec, black

[freeExec]

Роман Татаринов, ну вот и у вас, маршруты не копятся, а друг друга заменяют.

[Роман Татаринов]

freeExec, вывод с массивом мне не обнуляет ничего, хотя создает все маршруты, но при этом при переключении он не обнуляет(

if (status === 'OK') {
          let directionsDisplays = []; // создаем массив
          for (let i = 0; i < directionsDisplays.length; i++) {
            directionsDisplays[i].setMap(null); // очищаем все маршруты в цикле
          }
          directionsDisplays = []; // до кучи очищаем сам массив, хотя этого и так должно хватить
          console.log(directionsDisplays); // выводим наш массив. И он НИ РАЗУ не пустой, а с маршрутами. WTF?!?!
          const colors = ['blue', 'red', 'green', 'orange', 'yellow', 'black'];
          const responseRoutes = response.routes;
          for (let i = 0; i < responseRoutes.length; i++) {
            const directionsOptions = {
              directions: response,
              routeIndex: i,
              polylineOptions: {
                strokeColor: colors[i],
                strokeWeight: 4,
                strokeOpacity: 0.5,
              },
            };
            directionsDisplays.push(new google.maps.DirectionsRenderer(directionsOptions));
          }
          for (let i = 0; i < directionsDisplays.length; i++) {
            directionsDisplays[i].setMap(map);
          }
        }

// код с которого я тыкаю, и при этом не обнуляется ничего
for (let i = 0; i < modesItem.length; i++) {
      modesItem[i].addEventListener('click', function () {
       calculateAndDisplayRoute(directionsService, directionsDisplay);
   });
}

[freeExec]

Роман Татаринов, Ну вот что тут происходит, какова длинна списка будет?

let directionsDisplays = []; // создаем массив
          for (let i = 0; i < directionsDisplays.length; i++) {
            directionsDisplays[i].setMap(null); // очищаем все маршруты в цикле
          }

[Роман Татаринов]

freeExec, 0

[freeExec]

Роман Татаринов, Теперь понятно почему не очищается?

[Роман Татаринов]

freeExec, я разобрался в итоге. Нужно было создавать в глобальной зоне видимости массив, куда кладем маршруты. А потом их очищаем каждый раз при вызове

const directionsService = new google.maps.DirectionsService;
const directionsDisplay = new google.maps.DirectionsRenderer;
let directions = [];

() => {
directionsService,
if (status === 'OK') {
          const colors = ['blue', 'red', 'green', 'orange', 'yellow', 'black'];
          const responseRoutes = result.routes;

          directions.forEach((direction) => {
            direction.setMap(null);
          });

          directions = [];

          for (let i = 0; i < responseRoutes.length; i++) {
            const directionsOptions = {
              directions: result,
              routeIndex: i,
              polylineOptions: {
                strokeColor: colors[i],
                strokeWeight: 4,
                strokeOpacity: 0.5,
              },
            };
            const newDirection = new google.maps.DirectionsRenderer(directionsOptions);
            newDirection.setMap(map);
            directions.push(newDirection);
          }
      }
}

Answer 1

[Роман Татаринов]

Итого, в итоге рабочий вариант у меня
Нужно создавать в глобальной зоне видимости массив, куда кладем маршруты. А потом их очищаем каждый раз при вызове.

const directionsService = new google.maps.DirectionsService;
const directionsDisplay = new google.maps.DirectionsRenderer;
let directions = [];

() => {
directionsService,
if (status === 'OK') {
          const colors = ['blue', 'red', 'green', 'orange', 'yellow', 'black'];
          const responseRoutes = result.routes;

          directions.forEach((direction) => {
            direction.setMap(null);
          });

          directions = [];

          for (let i = 0; i < responseRoutes.length; i++) {
            const directionsOptions = {
              directions: result,
              routeIndex: i,
              polylineOptions: {
                strokeColor: colors[i],
                strokeWeight: 4,
                strokeOpacity: 0.5,
              },
            };
            const newDirection = new google.maps.DirectionsRenderer(directionsOptions);
            newDirection.setMap(map);
            directions.push(newDirection);
          }
      }
}