javascript - 在折线上停止动画符号 - googlemaps

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 是折线数组的索引。要访问折线，您需要使用 polylines[id]（即 polylines[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

对我来说，“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
    });
};