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

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

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

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

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

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

Two routes rendered on a map

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

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

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

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

У вас есть в полной мере reset карта в некотором роде?

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

Ответы

Ответ 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"));

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

Ответ 2

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

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

Ответ 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

Ответ 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);