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

时间:2017-10-10 14:31:08

标签: javascript leaflet markers

我正在使用带有动画标记插件的Leaflet。主要的想法是创建一个动画标记,从一个地方到另一个地方,最后,创建另一个( ONE )动画标记,在相同的纬度和经度,去往另一个地方,并删除第一个。

现在,当第一个动画结束时,它会创建两个动画标记。

以下是代码的一部分:

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

}

修改

经过一些调试后,我发现onEnd函数在第一个动画标记中运行了两次,也可能在第二个标记中运行,但我仍然不知道为什么会发生这种情况。

1 个答案:

答案 0 :(得分:0)

我刚刚删除了

marker.start();

在我创建标记时添加了这一行

autoStart: true

因此,标记的创建最终如下所示:

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

它解决了这个问题。