我只是试图改变谷歌的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
)