Stop animation symbol on polyline - googlemaps

问题:

I used the animation for symbols on polylines according to this answer that was very useful: Animate symbol on multiple geodesic polylines

What i would like is to have several polylines and generate animation when one is selected and stop animation for the others.

That is, i want to remove symbol and stop animation once it has started with the method mentioned above:

function animateCircle(id) {
    var count = 0;
    offsetId = window.setInterval(function () {
        count = (count+1) % 200;
        id.setOptions({
            icons: [{
                offset: (count/2)+'%'
            }]
        });
    }, 20);
};

I tried another function like this but it didn't work at all:

function stopCircle(id) {
    id.setOptions({
        icons: [{
            offset: '0%'
        }]
};

Neither:

function stopCircle(id) {
    id.setOptions({
        icons: null
};

Thanks.

回答1:

id is an index into your array of polylines. To access the polyline you need to use polylines[id] (i.e polylines[id].setOptions.

You probably also want to stop the timer, for that you need to keep a reference to the value returned by setInterval.

working example

function stopCircle(id) {
    clearInterval(polylines[id].handle);
    polylines[id].polyline.setOptions({
        icons: null});
};

Where the polylines array now contains:

    polylines[i] = new Object();
    polylines[i].polyline = polyline;
    polylines[i].handle = animateCircle(i);

回答2:

For me "id" is a polyline itself. All I need is to keep the output from "setInterval", that should be the input for "clearInterval". These are the two functions:

function animateCircle(id) {
    var count = 0;
    window.clearInterval(id.offsetId);
    id.offsetId = window.setInterval(function () {
        count = (count+1) % 200;
        id.setOptions({
            icons: [{
                offset: (count/2)+'%'
            }]
        });
    }, 20);
};

function stopCircle(id) {
    window.clearInterval(id.offsetId);
    id.setOptions({
        icons: null
    });
};