通过 travelMode 选项更新路线时无法从 Google 地图中删除路线

Question

我有一张地图，可以在上面放置自定义标记并计算路线。我有一个可以选择 travelMode 的选项。每次我更改 travelMode 时，我都想用新的 travelMode 等显示一条新路线。但现在路线已经绘制在现有路线上。我无法清除旧路线。

添加新路由时如何删除旧路由？

这是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>' );
        }
        });
     }
}

Answer 1

目前，每次调用DirectionsService（通过routeplannen 函数）时，都会创建一个DirectionsRenderer 的新实例。

如果您不希望在地图上单独呈现每个新的路线结果，请使用 DirectionsRenderer 的单个实例并重复使用它。

1. 在initMap函数中创建DirectionsRenderer：

var map = new google.maps.Map(document.getElementById('map'), {});
var directionsDisplay = new google.maps.DirectionsRenderer({
  map: map
});

1. 将其传递给routeplannen 函数：

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

routeplannen(directionsDisplay)

proof of concept fiddle

代码 sn-p：

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>