Не удается удалить маршрут с карт Google при обновлении маршрута с помощью опции travelMode - PullRequest
Новая
       10

Не удается удалить маршрут с карт Google при обновлении маршрута с помощью опции travelMode

0 голосов
/ 25 апреля 2018

У меня есть карта, на которой я размещаю собственные маркеры и рассчитываю маршрут.У меня есть возможность выбрать режим путешествия.Каждый раз, когда я меняю режим путешествия, я хочу показать новый маршрут с новым режимом путешествия и т. Д. Но сейчас маршрут перерисовывается поверх существующего.Я не могу очистить старый маршрут.

Как удалить старый маршрут при добавлении нового?

Это JS: 

function initMap() {    
    geocoder = new google.maps.Geocoder();

    var iconBestaandeklant = {
          url: 'http://icons.iconarchive.com/icons/iconshock/vista-general/32/house-icon.png', 
    };      

    var Arnhem = {
        title: '<strong>Naam</strong><br>\
                Dienst',
        lat: 51.986847,
        long: 5.955350,
    };

    var locations = [
        [Arnhem.title, Arnhem.lat, Arnhem.long, 0],
    ];

  var map = new google.maps.Map(document.getElementById('map'), { 

    });

    var infowindow = new google.maps.InfoWindow({});
    var marker, i;

    for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon:iconBestaandeklant,
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
    } 

document.getElementById('mode').addEventListener('change', function() {
     routeplannen();
});

routeplannen()  

function routeplannen() {
    var aanvraag = "6826AV";
    var dienstverlener = "6827AV";


    var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map
        });

     var selectedMode = document.getElementById('mode').value;


        var request = {
          destination: aanvraag,
          origin: dienstverlener,
          travelMode: google.maps.TravelMode[selectedMode]
        };            

        if (request.travelMode == "DRIVING") {vervoersmiddel = "met de auto"}
        else if (request.travelMode == "BICYCLING") {vervoersmiddel = "met de fiets"}

        else if (request.travelMode == "TRANSIT") {vervoersmiddel = "met het openbaar vervoer"}
        else{vervoersmiddel = "lopend"}

        var directionsService = new google.maps.DirectionsService();
        directionsService.route(request, function(response, status) {
          if (status == 'OK') {
            // Display the route on the map.

            directionsDisplay.setDirections(response);
          }
        });

        directionsService.route( request, function( response, status ) {

        if ( status === 'OK' ) {
        var point = response.routes[ 0 ].legs[ 0 ];
        $( '#travel_data' ).html( '<strong>Verwachte reistijd ' + vervoersmiddel + ": " +                   point.duration.text + ' (' + point.distance.text + ')</strong>' );
        }
        });
     }
}

1 Ответ

0 голосов
/ 26 апреля 2018

В настоящее время вы создаете новый экземпляр DirectionsRenderer каждый раз, когда вызываете DirectionsService (через функцию routeplannen).

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

  1. создайте DirectionsRenderer в функции initMap: 
var map = new google.maps.Map(document.getElementById('map'), {});
var directionsDisplay = new google.maps.DirectionsRenderer({
  map: map
});
передать это в функцию routeplannen: 
document.getElementById('mode').addEventListener('change', function() {
  routeplannen(directionsDisplay);
});

routeplannen(directionsDisplay)

подтверждение концепции скрипта

фрагмент кода: 

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {});
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  var infowindow = new google.maps.InfoWindow({});
  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: iconBestaandeklant,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
  document.getElementById('mode').addEventListener('change', function() {
    routeplannen(directionsDisplay);
  });
  routeplannen(directionsDisplay)

  function routeplannen(directionsDisplay) {
    var aanvraag = "6826AV";
    var dienstverlener = "6827AV";
    var mode = document.getElementById('mode');
    var selectedMode = mode.options[mode.selectedIndex].value;
    console.log(selectedMode);
    var request = {
      destination: aanvraag,
      origin: dienstverlener,
      travelMode: selectedMode
    };

    if (request.travelMode == "DRIVING") {
      vervoersmiddel = "met de auto"
    } else if (request.travelMode == "BICYCLING") {
      vervoersmiddel = "met de fiets"
    } else if (request.travelMode == "TRANSIT") {
      vervoersmiddel = "met het openbaar vervoer"
    } else {
      vervoersmiddel = "lopend"
    }

    var directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status) {
      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      }
    });

    directionsService.route(request, function(response, status) {

      if (status === 'OK') {
        var point = response.routes[0].legs[0];
        $('#travel_data').html('<strong>Verwachte reistijd ' + vervoersmiddel + ": " + point.duration.text + ' (' + point.distance.text + ')</strong>');
      }
    });
  }
}
var iconBestaandeklant = {
  url: 'http://icons.iconarchive.com/icons/iconshock/vista-general/32/house-icon.png',
};

var Arnhem = {
  title: '<strong>Naam</strong><br>\
                Dienst',
  lat: 51.986847,
  long: 5.955350,
};

var locations = [
  [Arnhem.title, Arnhem.lat, Arnhem.long, 0],
];
#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mode">
  <option value="DRIVING">Driving</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
...