Question

我根据这个非常有用的答案将动画用于折线上的符号： Animate symbol on multiple geodesic polylines

我想要的是拥有多条折线并在选择一条折线时生成动画，并为其他折线停止动画。

也就是说，我希望在使用上述方法启动后删除符号并停止动画：

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返回的值的引用。

working example

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

对我而言，“id”本身就是折线。我需要的是保持“setInterval”的输出，这应该是“clearInterval”的输入。这是两个功能：

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

在折线上停止动画符号 - 谷歌地图

2 个答案: