Suppression des itinéraires dans Google Maps

Question

J'affiche une liste de lieux sur une carte en utilisant l'api google places. Les utilisateurs peuvent obtenir des directions pour chacun de ces lieux individuellement. Les indications s'affichent bien sur la carte et tout fonctionne, mais chaque fois qu'ils obtiennent des indications pour un lieu différent, celles-ci sont ajoutées à la carte avec les anciennes indications. Je veux écraser les indications existantes sur la carte lorsqu'un nouveau lieu est sélectionné. Ainsi, un seul ensemble d'indications apparaît à tout moment. Idéalement, je veux qu'un seul itinéraire soit marqué sur la carte et qu'une seule liste d'instructions soit affichée.

J'ai essayé d'ajouter ce qui suit pour effacer toutes les directions avant de définir les nouvelles :

directionDisplay = new google.maps.DirectionsRenderer();
directionDisplay.suppressMarkers = true;
directionDisplay.setMap(null);

Comme suggéré ici : Google Maps Version 3 Supprimer les marqueurs d'itinéraire mais en vain.

J'ai beau chercher sur Google et dans la documentation, je n'y arrive pas.

Toute aide serait grandement appréciée.

JA

Answer 1

Il n'est pas nécessaire d'effacer les indications avant d'en rendre de nouvelles.

Utilisez une variable globale pour directionDisplay, les directions actuelles seront supprimées dès que vous appellerez setDirections() pour rendre de nouvelles directions.

Answer 2

// in the global scope
var directions = [];

document.getElementById('submit').addEventListener('click', function () {
if (directions && directions.length > 0) {
  for (var i=0; i<directions.length; i++)
     directions[i].setMap(null);
  }
  directions = [];
  calculateAndDisplayRoute(directionsService, markerArray, stepDisplay, map, true, "SUBWAY");
});

function calculateAndDisplayRoute(directionsService,markerArray, stepDisplay, map, is_transit, transit_mode) {
            //var selectedMode = "TRANSIT";
            // First, remove any existing markers from the map.
            for (var i = 0; i < markerArray.length; i++) {
                markerArray[i].setMap(null);
            }

            if (is_transit == true){
                var request = {
                    origin: {lat: start_lat, lng: start_lon},
                    destination: {lat: end_lat, lng: end_lon},
                    travelMode: google.maps.TravelMode.TRANSIT,
                    transitOptions: {
                        modes: [google.maps.TransitMode[transit_mode]],
                    },
                    provideRouteAlternatives: true
                };
            }else{
                var request = {
                    origin: {lat: start_lat, lng: start_lon},
                    destination: {lat: end_lat, lng: end_lon},
                    travelMode: google.maps.TravelMode[transit_mode],
                    provideRouteAlternatives: true
                };
            }

            // Retrieve the start and end locations and create a DirectionsRequest using

            directionsService.route(request, function(response, status) {
                // Route the directions and pass the response to a function to create
                console.log(response)
                console.log(response.routes[0])

                var polyline = new google.maps.Polyline({
                    strokeColor: '#6855C9',
                    strokeOpacity: 1,
                    strokeWeight: 7
                });

                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = response.routes.length; i < len; i++) {

                        directions.push(new google.maps.DirectionsRenderer({
                            map: map,
                            directions: response,
                            routeIndex: i  ,
                            suppressMarkers: true
                        }));

                        //showSteps(response, markerArray, stepDisplay, map);
                    }
                } else {
                    window.alert('Directions request failed due to ' + status);
                }

            });
        }