每当对车辆进行动画处理时绘制折线

如何解决每当对车辆进行动画处理时绘制折线

具有动画功能的应用程序成功运行。下面的代码通过折线为车辆图标设置动画。

在下面的代码中，当车辆通过路线进行动画时如何绘制折线？ Red Line at the time of animating

我尝试过，但在开始动画之前总是显示一行。车辆行驶时需要现有折线和新线。

    var step = 50; // 5; // metres
        var tick = 100; // milliseconds
        var eol;
        var k = 0;
        var stepnum = 0;
        var speed = "";
        var lastVertex = 1;

        //=============== animation functions ======================
        function updatepoly(d) {
            // Spawn a new polyline every 20 vertices,because updating a 100-vertex poly is too slow
            if (poly2.getPath().getLength() > 20) {
                poly2 = new google.maps.polyline([polyline.getPath().getAt(lastVertex - 1)]);
                // map.addOverlay(poly2)
            }
            if (polyline.GetIndexAtdistance(d) < lastVertex + 2) {
                if (poly2.getPath().getLength() > 1) {
                    poly2.getPath().removeAt(poly2.getPath().getLength() - 1);
                }
                poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtdistance(d));
            } else {
                poly2.getPath().insertAt(poly2.getPath().getLength(),endLocation.latlng);
            }        

      
        }

        function animate(d) {
            if (d > eol) {
                map.panTo(endLocation.latlng);
                Animationmarker.setPosition(endLocation.latlng);
                return;
            }
            var p = polyline.GetPointAtdistance(d);
            map.panTo(p);
            var lastPosn = Animationmarker.getPosition();
            Animationmarker.setPosition(p);
            var heading = google.maps.geometry.spherical.computeheading(lastPosn,p);
            icon.rotation = heading;
            Animationmarker.setIcon(icon);
            updatepoly(d);
            tick = document.getElementById('<%= DrpAnimateSpeed.ClientID%>').value;
           
           // alert(tick);
            timerHandle = setTimeout("animate(" + (d + step) + ")",tick);              
            currentdistance = d + step;                    



        }

    function startAnimation() {
        if (timerHandle) {
            clearTimeout(timerHandle);
        }
        if (Animationmarker) {
            Animationmarker.setMap(null);
        }
  
            eol = polyline.distance();
            map.setCenter(polyline.getPath().getAt(0));
            Animationmarker = new google.maps.Marker({
                position: polyline.getPath().getAt(0),map: map,icon: icon
            });

            poly2 = new google.maps.polyline({
                path: [polyline.getPath().getAt(0)],strokeColor: "orange",strokeWeight: 20
            });


             //map.addOverlay(poly2);
            setTimeout("animate(50)",2000); // Allow time for the initial map display
    }

解决方法

Red -Blue line difference在animate（）函数中添加了以下代码，并在移动动画图标时绘制了另一条折线。在这里我面临的问题是，有些地方红线像图像一样显示。图像中的蓝线基于方向服务路线。红色是根据以下代码绘制的一张图纸。如何解决此问题？

            ///Ad[enter image description here][1]ded             
            HighlightPoly = new google.maps.Polyline({
                path: [],strokeColor: 'red',strokeWeight: 4
            });
            var codeStr = [];
            const path = [lastPosn,p];
            HighlightPoly.setPath(path);
            HighlightPoly.setMap(map);
            //////////////////////