Marqueur animé de dépliant créer des marqueurs dupliqués

Question

J'utilise Leaflet avec le plugin de marqueur animé. L'idée principale est de créer un marqueur animé qui va d'un endroit à un autre et, à la fin, crée un autre marqueur animé (ONE) dans la même latitude et la même longitude qui va à un autre endroit et supprime le premier.

À l'heure actuelle, lorsque la première animation se termine, elle crée deux marqueurs animés.

Voici une partie du code:

function moveDriverToPassengerLocation(driver, passenger) { 

    // Creating the request for google's direction services 
    var request = { 
     origin: driver.startLocation, 
     destination: passenger.startLocation, 
     travelMode: 'DRIVING' 
    }; 

    // Sending the request 
    directionsService.route(request, function (result, status) { 

     // Verify if the status is ok for getting the path 
     if (status == 'OK') { 
      // Decoding the polyline 
      var decodedPath = L.PolylineUtil.decode(
       result.routes[0].overview_polyline); 

      // Verify if the path has more than one point 
      if (decodedPath.length > 1) { 
       var line = L.polyline(decodedPath); 

       // Creating the new animated marker 
       var marker = L.animatedMarker(line.getLatLngs(), 
       { 
        distance: 300, 
        interval: 2000, 
        icon: taxiIcon, 
        onEnd: function() { 
         map.removeLayer(this); 
         moveDriverToPassengerDestination(driver, passenger) 
        } 
       }).addTo(map); 
       marker.id = driver.id; 
       marker.startLocation = driver.startLocation; 
       driversMarkers.push(marker); 
       marker.start(); 
      } 
     } 
    }); 
} 

function moveDriverToPassengerDestination(driver, passenger) { 
    // Creating the request for google's direction services 
    var request = { 
     origin: passenger.startLocation, 
     destination: passenger.destination, 
     travelMode: 'DRIVING' 
    }; 

    // Sending the request 
    directionsService.route(request, function (result, status) { 

     // Verify if the status is ok for getting the path 
     if (status == 'OK') { 
      // Decoding the polyline 
      var decodedPath = L.PolylineUtil.decode(result.routes[0] 
       .overview_polyline); 

      // Verify if the path has more than one point 
      if (decodedPath.length > 1) { 
       var line = L.polyline(decodedPath); 

       // Creating the new animated marker 
       var marker = L.animatedMarker(line.getLatLngs(), 
       { 
        distance: 300, 
        interval: 2000, 
        icon: taxiIcon, 
        onEnd: function() { 
         map.removeLayer(this); 
        } 
       }).addTo(map); 
       marker.id = driver.id; 
       marker.startLocation = driver.startLocation; 
       driversMarkers.push(marker); 
       marker.start(); 
      } 
     } 
    }); 

} 

EDIT:

Après un peu débogage j'ai trouvé que la fonction OnEnd est en cours d'exécution deux fois dans le premier marqueur d'animation et probablement dans la deuxième marqueur aussi, mais je ne sais toujours pas pourquoi cela se produit.

Answer 1

Je viens enlevé

marker.start(); 

et a ajouté cette ligne quand je crée un marqueur

autoStart: true 

Ainsi, la création du marqueur ressemble finalement à ceci:

var marker = L.animatedMarker(line.getLatLngs(), 
{ 
    distance: 300, 
    interval: 2000, 
    autoStart: true, 
    icon: taxiIcon, 
    onEnd: function() { 
     map.removeLayer(this); 
     driver.isMoving = false; 
     addDriverMarker(driver); 
    } 
}).addTo(map); 

Il résolu le problème.