停止对折线动画符号 - 谷歌地图(Stop animation symbol on polyline

2019-07-17 18:39发布

我用动画上根据这个答案,这是非常有用的折线符号: 动画上的多个测地折线符号

我想是有几个折线和当选择一个生成的动画和其他动画停止。

也就是说,我想删除符号,一旦它已开始与上述方法停止动画:

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

我想这样的其他功能,但它并没有在所有的工作:

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

无论是:

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

谢谢。

Answer 1:

ID是索引到你的折线的阵列。 要访问你需要使用折线[ID](即折线[ID] .setOptions折线。

你可能也想停止计时,对于需要保留由setInterval的返回值的参考。

工作示例

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

凡折线数组现在包含:

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


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


文章来源: Stop animation symbol on polyline - googlemaps