Очистка карты от маршрута при нажатии кнопки

273
16 июля 2017, 13:15

Нужно построить автомобильный и пешеходный маршруты через google maps по двум точкам. Есть два поля ввода (от и до), и две кнопки (автомобильный маршрут и пеший). Для каждой кнопки есть своя функция. Все работает, только при построении нового маршрута не удаляется старый. Как сделать чтобы перед построением карта очищалась?

var myOptions = {
      zoom: 16,
      center: new google.maps.LatLng(53.8374829,21.1518056),
      gestureHandling: 'cooperative',
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        zoomControl: true,
    };
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

    function route1(from, to) {      
            var directionsService = new google.maps.DirectionsService();
            var directionsRequest = {
              origin: from,
              destination: to,
              travelMode: google.maps.DirectionsTravelMode.WALKING,
              unitSystem: google.maps.UnitSystem.METRIC
            };
            directionsService.route(
              directionsRequest,
              function(response, status)
              {
                if (status == google.maps.DirectionsStatus.OK)
                {
                  new google.maps.DirectionsRenderer({
                    map: mapObject,
                    directions: response
                  });
                }
                else
                  $("#error").append("Unable to retrieve your route<br />");
              }
            );
          }
    function route2(from, to) {
            var directionsService = new google.maps.DirectionsService();
            var directionsRequest = {
              origin: from,
              destination: to,
              travelMode: google.maps.DirectionsTravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC
            };
            directionsService.route(
              directionsRequest,
              function(response, status)
              {
                if (status == google.maps.DirectionsStatus.OK)
                {
                  new google.maps.DirectionsRenderer({
                    map: mapObject,
                    directions: response
                  });
                }
                else
                  $("#error").append("Unable to retrieve your route<br />");
              }
            );
  }
  $(document).ready(function() {
        $("#walking button").click(function(event) {
          event.preventDefault();
          route1($("#route-from").val(), $("#route-to").val());
        });
        $("#driving button").click(function(event) {
          event.preventDefault();
          route2($("#route-from").val(), $("#route-to").val());
        });
  });
Answer 1

Пожалуйста - https://jsfiddle.net/1Lawd8a8/

Необходимо результат выполнения new google.maps.DirectionsRenderer присваивать какой нибудь переменной, а перед прокладкой нового маршрута вызвать у этой переменной метод setMap, к примеру:

    var route = new google.maps.DirectionsRenderer({ //Добавили маршрут на карту
        map: mapObject,
        directions: response
    });
    route.setMap(null) //Удалили с карты

На jsfiddle целиком рабочий пример

READ ALSO
Вывод ошибки javascript в Gulp

Вывод ошибки javascript в Gulp

Помогите решить проблему с выводом ошибки javascript в gulp при помощи плагинов, которые выводят ошибку в отдельном окне, как notyficationДля less настроил,...

482
Как убрать стрелочку у &ldquo;Select&rdquo; IE10+? [дубликат]

Как убрать стрелочку у “Select” IE10+? [дубликат]

На данный вопрос уже ответили:

384
Как преобразовать строку в объект?

Как преобразовать строку в объект?

Как преобразовать строку

438
JS авто. замена текста в текстовом поле

JS авто. замена текста в текстовом поле

Здравствуйте я новичок в JS, не подскажите как реализовать такую идеюЕсть 1но поле для текста, 2 кнопки переключения раскладки иностранного...

551