谷歌地图动画多个符号

Google Maps animating multiple symbols

本文关键字：符号 动画 谷歌地图      更新时间：2023-09-26

我只是试图改变谷歌的animateCircle()的版本，这样它会动画多个图标而不是只有一个，但它似乎不工作的图标除了第一个。什么好主意吗?

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

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

明白了。注意:这里没有显示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)

相关文章：