Question

我正在创建一个带有动画的多个折线的地图，使它看起来像是朝向某个东西（几乎就像进度条）。

我看了一下这个例子：https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

所以我现在正在这样做：

const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    strokeOpacity: 1,
    scale: 2,
};

const circlesLine = new google.maps.Polyline({
    path: [arrival, departure],
    strokeColor: color,
    strokeOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '100%',
        repeat: '20px',
    }],
    map,
});

let count = 0;
this.lineAnimation = setInterval(() => {
    count++;

    const icons = circlesLine.get('icons');
    icons[0].offset = count + '%';
    circlesLine.set('icons', icons);
}, 20);

所以我正在使用偏移来补充行

我唯一想知道的是如何让每一行的速度都相同。现在线越长，动画越快，这是有道理的，但我不知道如何根据长度进行计算。

希望有人可以帮助我，thnx！

Answer 1

我在考虑复杂化，解决方案非常简单。

我最后只是将偏移更改为'px'而不是'％'。

let count = 0;
this.lineAnimation = setInterval(() => {
    count++;

    const icons = circlesLine.get('icons');
    icons[0].offset = count + 'px';
    circlesLine.set('icons', icons);
}, 20);

希望这有助于其他人。

Google Maps API折线动画在线长度

1 个答案: