Javascript 在多条测地线多段线上设置符号动画

我想通过多条测地线多段线来设置符号的动画…我厌倦了在for循环中这样做。线被画出来了，但是圆（符号）没有动画。它只是停留在起点，这是我的代码

    var poly;
    var geodesic;
    var map;
    var clickcount = 0;

    function initialize() {


        var styles = [{ featureType: "landscape", stylers: [{ color: "#000514"}] }, { featureType: "administrative.country", stylers: [{ weight: 0.1 }, { color: "#009acd"}] }, { featureType: "water", stylers: [{ color: "#1f4fa5dc"}] }, { featureType: "road", stylers: [{ color: "#000514"}] }, { featureType: "administrative.locality", stylers: [{ color: "#7cfc00" }, { visibility: "off"}] }, { featureType: "landscape.man_made", stylers: [{ visibility: "off"}] }, { featureType: "poi", stylers: [{ visibility: "off"}] }, { featureType: "administrative.province", stylers: [{ visibility: "on"}]}];
        var mapOptions = {
            center: new google.maps.LatLng(7.3, 80.6333),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
        map.setOptions({ styles: styles });

        var lineSymbol = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 2,
            strokeColor: '#FF0000'
        };


        var i;
        for (i = 0; i < 50; i = i + 5) {


            var flightPlanCoordinates = [
            new google.maps.LatLng(7.3, 80.6333),
            new google.maps.LatLng(23.772323 + i, -102.214897 - i)];
            var polyline = new google.maps.Polyline({
                path: flightPlanCoordinates,
                icons: [{ icon: lineSymbol, offset: '100%'}],
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 1,
                geodesic: true                  
            });

            polyline.setMap(map);
            animateCircle();
        }
    }

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

            var icons = polyline.get('icons');
            icons[0].offset = (count / 2) + '%';
            polyline.set('icons', icons);
        }, 20);
    }

var-poly；
var测地线；
var映射；
var-clickcount=0；
函数初始化（）{
var styles=[{featureType:“景观”，styles:[{color:”“1f4fa5dc”}，{featureType:“行政.国家”，styles:[{weight:0.1}，{color:”“009acd”}，{featureType:“水”，styles:[{color:”“1f4fa5dc”}，{featureType:“道路”，styles:[{color:”“000514”}，{featureType:“行政.地点”，styles:{“#7CFC000”}、{可见性：“关闭”}、{特性类型：“景观.人造”，样式：[{可见性：“关闭”}]}、{特性类型：“poi”，样式：[{可见性：“关闭”}]}、{特性类型：“行政.省”，样式：[{可见性：“打开”}]；
变量映射选项={
中心：新google.maps.LatLng（7.3,80.6333），
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
setOptions（{styles:styles}）；
变量lineSymbol={
路径：google.maps.SymbolPath.CIRCLE，
比例：2，
strokeColor:“#FF0000”
};
var i；
对于（i=0；i<50；i=i+5）{
var FlightPlan坐标=[
新的google.maps.LatLng（7.3,80.6333），
新的google.maps.LatLng（23.772323+i，-102.214897-i）]；
var polyline=新的google.maps.polyline({
路径：FlightPlan坐标，
图标：[{icon:lineSymbol，偏移量：'100%}]，
strokeColor:#FF0000“，
笔划不透明度：1.0，
冲程重量：1，
测地线：真
});
多段线.setMap（map）；
动画循环（）；
}
}
函数animateCircle（）{
var计数=0；
offsetId=window.setInterval（函数（）{
计数=（计数+1）%200；
var icons=polyline.get（'icons'）；
图标[0]。偏移量=（计数/2）+'%'；
多段线。设置（'图标'，图标）；
}, 20);
}

---

请在这一点上帮助我。我很想看到这项工作：）非常感谢。

您的多段线变量超出了animateCircle函数的范围。您必须使用闭包，从animateCircle函数中获取代码并粘贴它以代替其调用

编辑：我像往常一样搞砸了收尾；-） 您可以这样做（同样，未经测试）：

//变量
var poliylines=新数组（）；
函数初始化（）{
//不变代码
var i；
对于（i=0；i<50；i=i+5）{
//不变代码
多段线[i]=多段线；
动画片（i）；
}
}
函数animateCircle（变量id）{
var计数=0；
offsetId=window.setInterval（函数（）{
计数=（计数+1）%200；
var icons=polylines[id].get（'icons'）；
图标[0]。偏移量=（计数/2）+'%'；
多段线[id]。设置（'图标'，图标）；
}, 20);
}

找到了这个问题的简单答案。我正在使用谷歌地图api v3

向下滚动并单击下面的html+javascript选项卡我们有变量线坐标。在这里我们可以传递一组对象，而不是像这样传递两个对象：

var lineCoordinates = [
new google.maps.LatLng(latitude1, longitude1),
new google.maps.LatLng(latitude2, longitude2),
new google.maps.LatLng(latitude3, longitude3),
new google.maps.LatLng(latitude4, longitude4)
];

---

动画现在将在线坐标中的所有对象上进行。在本例中为4条多段线。

非常感谢您的回答。：）它现在只对一个符号进行动画。。其他符号仍在那里。。有任何方法可以对所有符号进行动画制作吗？哇哇哇…你是个天才。。非常感谢。！！！：）非常感谢迟到了，谢谢你的帮助，再次感谢，很有效，看看这篇文章，这对我很有效。

var lineCoordinates = [
new google.maps.LatLng(latitude1, longitude1),
new google.maps.LatLng(latitude2, longitude2),
new google.maps.LatLng(latitude3, longitude3),
new google.maps.LatLng(latitude4, longitude4)
];