Amap track playback when how to display coordinate points corresponding to the information form?

< html >
< head >

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.6&key=9de92313cbe74b698ad9f8e784cad910"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

< / head >
< body >
< div id= "container" > < / div >
< div class= "button-group" >

<input type="button" class="button" value="" id="start"/>
 <input type="button" class="button" value="" id="pause"/>
  <input type="button" class="button" value="" id="resume"/>
<input type="button" class="button" value="" id="stop"/>

< / div >
< script >

var marker, lineArr = [];

var map = new AMap.Map("container", {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom: 17
});
marker = new AMap.Marker({
    map: map,
    position: [116.397428, 39.90923],
    icon: "https://img.codeshelper.com/upload/img/2021/03/22/35hwtacyzyp12015.png",
    offset: new AMap.Pixel(-26, -13),
    autoRotation: true,
});



marker.on("click",function (e){
    console.log(e)
    infoWindow.open( map, marker.getPosition() );   
})

    var infoArr=["1","2","3","4"];

    var infoWindow;
    
    

    infoWindow = new AMap.InfoWindow({
        content: infoArr[0]//
    });
    


var lngX = 116.397428, latY = 39.90923;        
lineArr.push(new AMap.LngLat(lngX, latY));
for (var i = 1; i < 4; iPP) {
    lngX = lngX + Math.random() * 0.05;
    if (i % 2) {
        latY = latY + Math.random() * 0.0001;
    } else {
        latY = latY + Math.random() * 0.06;
    }
    lineArr.push(new AMap.LngLat(lngX, latY));
}




// 
var polyline = new AMap.Polyline({
    map: map,
    path: lineArr,
    strokeColor: "-sharp00A",  //
    strokeWeight: 3,      //
});
var passedPolyline = new AMap.Polyline({
    map: map,
    strokeColor: "-sharpF00",  //
    strokeWeight: 3,      //
});


marker.on("moving",function(e){
    passedPolyline.setPath(e.passedPath);
    infoWindow.open(map, marker.getPosition() );  
})
marker.on("click",function(e){
    
})


map.setFitView();

AMap.event.addDomListener(document.getElementById("start"), "click", function() {
    marker.moveAlong(lineArr, 500);
}, false);
 AMap.event.addDomListener(document.getElementById("pause"), "click", function() {
    marker.pauseMove();
   }, false);
  AMap.event.addDomListener(document.getElementById("resume"), "click", function() {
    marker.resumeMove();
}, false);
AMap.event.addDomListener(document.getElementById("stop"), "click", function() {
    marker.stopMove();
}, false);

< / script >
< / body >
< / html >

if marker is in the range of the first coordinate point, the form displays the range from 1 to the second coordinate point, it shows 2, and so on. I don"t know how to do it. Please ask God for an answer. Thank you