0

我只是尝试将 google 的 animateCircle() 版本更改为此，以便它可以为多个图标设置动画，而不仅仅是一个，但它似乎不适用于除第一个之外的图标。有任何想法吗？

路径是一个路径数组，其中还包含有关路径的其他信息。 

 var icons = [{ icon : lineSymbol, offset : "100%"}, 
                          { icon : lineSymbol, offset : "90%"}]    

function animateArrow() {
        var count = 0;
        offsetId = window.setInterval(function() {
            count = (count + 1) % 200;

            var icons = paths.path.get('icons');
            for (var i = 0; i < icons.length; i++) {
                icons[i].offset = (count / 2) + '%';
            }
            paths.path.set('icons', icons);
        }, 20);
    }
4

1 回答 1

0

弄清楚了。注：path此处未显示。 percentSpaced应根据您想要的间距进行更改，即 20 表示符号之间的 20% 间距。

function animateArrow(path) {
                var count = 0, icons = new Array();
                var percentSpaced = 20;
                var intervalTime = 20; // miliseconds


                var lineSymbol = {
                    path : google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    strokeColor : "#000000",
                    strokeOpacity : .95,
                    strokeWeight : 10,
                    fillColor : "#FFFFFF",
                    fillOpacity : .7
                };

                for (var i = 0; i < 100/percentSpaced; i++) {
                    icons.push({ icon : lineSymbol });
                }

                path.set("icons", icons);

                offsetId = window.setInterval(function() {
                    count = (count + 1) % 200;

                    var icons = paths.path.get('icons');
                    for (var i = 0; i < icons.length; i++) {
                        icons[i].offset = ((count / 2) + (i * percentSpaced)) % 100 + '%';
                    }
                    path.set("icons", icons);
                }, intervalTime);
            }

您必须考虑两件事：

1) 计数设置假设只有 1 个图标。（因此(i * percentSpaced)）

2) 如果图标的百分比超过 100%，则图标应重新从头开始。（因此% 100在最后）

于 2013-06-21T13:16:52.440 回答