Удаление маршрутов, отображаемых на карте Google

Question

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

У меня есть веб-страница, на которой отображаются три Карты Google.

Для каждой из этих карт Google у меня есть текстовое поле, в котором можно указать почтовый индекс или почтовый индекс, а также кнопку "Получить маршрут".

Нажатие на каждую из этих кнопок использует объект google.maps.DirectionsService для отображения ОДНОГО набора направлений на ОДНОЙ панели с центром в нижней части страницы.

Моя проблема возникает, когда я пытаюсь найти новый маршрут путем повторного поиска. Как вы можете видеть на изображении ниже, оба маршрута отображаются.

У меня есть один маркер в конце, который находится в коллекции маркеров.

Я уже несколько раз читал о том, как вы можете перебрать этот массив и использовать marker.setMap (null), чтобы очистить этот маркер.

Однако я не могу очистить фактические маршруты после каждого конкретного поиска.

У кого-нибудь были проблемы с очисткой маркеров с нескольких карт?

Вам нужно каким-то образом полностью сбросить карту?

Если вам необходимо очистить маркеры, в какой момент жизненного цикла процесса вы должны сделать это, чтобы ваше новое путешествие появилось после поиска, а старое было удалено?

Answer 1

Я использую один и тот же объект google.maps.DirectionsService для всех трех карт Google, и все они вызывают один и тот же метод для вычисления направлений, но в качестве параметра передают собственный объект карты.

function calcRoute(startPoint, location_arr) {
    // Create a renderer for directions and bind it to the map.
    var map = location_arr[LOCATION_ARR_MAP_OBJECT];
    var rendererOptions = {
    map: map
}

if(directionsDisplay != null) {
    directionsDisplay.setMap(null);
    directionsDisplay = null;
}

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

directionsDisplay.setMap(map);

directionsDisplay.setPanel(document.getElementById("directionsPanel"));

Суть в том, что если directionsDisplay! = Null, мы не только передаем null в setMap, мы также аннулируем весь объект afterweards, и я обнаружил, что это исправлено.

Answer 2

Это единственная часть, которая вам нужна:

// Clear past routes
    if (directionsDisplay != null) {
        directionsDisplay.setMap(null);
        directionsDisplay = null;
    }

Answer 3

Я не знаю ответа .... скорее всего, все, что вам нужно сделать, это в зависимости от обстоятельств:

// put the codes after direction service is declared or run directionsService //

directionsDisplay.setMap(null); // clear direction from the map
directionsDisplay.setPanel(null); // clear directionpanel from the map          
directionsDisplay = new google.maps.DirectionsRenderer(); // this is to render again, otherwise your route wont show for the second time searching
directionsDisplay.setMap(map); //this is to set up again

Answer 4

Это работает для меня

// on initiate map
// this listener is not necessary unless you use listener
google.maps.event.addListener(directionsRenderer, 'directions_changed', function () {
    if(directionsRenderer.directions === null){
        return;
    }
    // other codes
});

// on clear method
directionsRenderer.set('directions', null);