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

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

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

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

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

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

Два маршрута на карте

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

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

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

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

Нужно ли как-то полностью сбрасывать карту?

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


google-maps javascript routes google-maps-markers
person Karl    schedule 25.10.2011    source источник

Ответы (4)


arrow_upward
19
arrow_downward

Я использую один и тот же объект 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, мы также впоследствии обнуляем весь объект, и я обнаружил, что это исправлено.

person Karl    schedule 22.03.2013
comment
столкнулся с такой же проблемой, нажав на другой контакт после setMap(null); некоторое время показывал старый маршрут, а затем показывал новый маршрут (старый маршрут как бы моргнул). Но установка старого DirectionsRenderer на ноль и создание нового устранили проблему, как было предложено. - person Awais; 06.08.2015

arrow_upward
4
arrow_downward

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

// 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
person I dont know    schedule 08.06.2016

arrow_upward
4
arrow_downward

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

// Clear past routes
    if (directionsDisplay != null) {
        directionsDisplay.setMap(null);
        directionsDisplay = null;
    }
person Friendly Code    schedule 16.06.2016

arrow_upward
2
arrow_downward

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

// 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);
person Shanaka Madusanka    schedule 24.06.2019