单张动画标记创建重复的标记

Question

I am using Leaflet with the animated marker plugin. The main idea is to create an animated marker that goes to one place to another and, at the end, create another ( ONE ) animated marker in the same latitude and longitude that goes to another place and remove the first one.

Right now, when the first animation ends it creates two animated markers.

Here is a that part of the 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:

After a little debugging I found that onEnd function is running twice in the first animated marker and probably in the second marker as well, but I still don't know why this is happening.

Answer 1

I just removed

marker.start();

And added this line when I create a marker

autoStart: true

So, the creation of the marker finally looks like this:

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);

It solved the problem.