每当设置车辆动画时绘制多段线

Question

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

在下面的代码中，如何在车辆通过路线时绘制多边形线？像这个Jsfidle设置动画时的红线

我试过了，但总是在开始动画之前显示线条。车辆移动时需要现有多段线和新线。

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
}

Answer 1

红蓝线差异在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);
//////////////////////