Question

希望你们中的一些人可以帮助我。

使用 Gmaps 编码的折线数组，我设法创建了一张地图，将折线显示为旅行或旅程。现在我的意图是使用movingmarker.js从数组的开头开始，并在最后一个GPS位置结束。

但是，在我创建了 L.Polyline 之后，数组已按持续时间而不是索引进行排序。

$.each(response.currentTravel.legs, function(index) { 

        var polyline = L.Polyline.fromEncoded(response.currentTravel.legs[index].polyline);
        polyline.addTo(map);
        
        var latlng = polyline.getLatLngs();
        var duur = response.currentTravel.legs[index].duration
        var idline = parseInt(index)
                                            
        setTimeout(function() {             

        const arr = [idline,latlng,duur];

        for (const [idline, element] of arr.entries()) {
            console.log(`${idline}. ${element}`);
        };
                  
            animatedMarker = L.animatedMarker(latlng, {
                                    interval: duur*10, // milliseconds
                                    });
                    map.addLayer(animatedMarker);
                    
                }, duur*100);
            
            });
        });
                                                
};

当我从 setTimeout 函数中 console.log 折线数组时，索引仍然是 Google 返回的，但是当我在 for..of 和 setTimeout 函数中执行相同操作时，它会按持续时间返回顺序数组的一部分，而不是索引。数据如下：

currentTravel:
legs: Array(17)
0: {duration: 63, polyline: "_|r{H}myZ}@wFAQCM?O?G?E@E@CDE@AVUjAo@lAq@b@YNU"}
1: {duration: 107, polyline: "qvr{Hm}yZlBpFtB~FlBfFhA|C@Bh@vAbBrEFTd@pARh@Rl@@@@BLXJRLNHBHDf@HRB`@DdA\XXXXHPP\Rl@n@dB@FL\Lb@Lb@"}
2: {duration: 49, polyline: "kuq{H_cxZLZDTNYJQJQt@qAt@iAZq@BAVc@b@y@@AZm@DKDGHM^q@@AVYRQ@?JIPG@?NCLAN?RDD?@@D@^P"}
3: {duration: 194, polyline: "sdq{HgrxZHP@DBDDFDHDHBLD\I^Id@I`@?@ADELENEJADGJEHE…@^[TIFi@Zw@^aAZiDdAYJaAX}HbC_AXcIdC]JeFzAu@Vm@TQJ"}
4: {duration: 166, polyline: "eyu{H}`zZy@\u@\MDEDUL[Ri@Zg@ZSNc@Z]Xg@b@i@d@e@d@]^…OAOCk@Gk@Ii@M_AUe@Mk@Sq@W_@Qi@Um@[a@SoAu@y@e@eBaA"}
5: {duration: 79, etc.

预期的行为应该是（有一些调整）animatedmarker 从第一条折线的开头开始，然后迭代下一行，这样我就可以在它到达每条折线上的最后一个 GPS 位置时销毁标记，并从下一条开始一个直到旅程结束。

希望能帮到你。

Answer 1

我已经想通了。我从$.each 迭代中取出movingMarker 函数并将其直接放在Ajax 调用之后。现在我可以使用 .flat() 将嵌套的腿数组用作自己的数组并循环遍历一个腿数组，而不是处理每个给定的腿数组。

        $.ajax(settings2).done(function (response) {
        
        var rep;
        rep = clicked_id;

        //first fetch the leg array from the Ajax call
        var legs = new Array(response.currentTravel.legs)
        var arr = legs.flat()
        //console.log(arr)

        //function promise to wait for given ms to start
        const waitFor = (ms) => new Promise(r => setTimeout(r, ms))
        const asyncForEach = async (array, callback) => {
         for (let index = 0; index < array.length; index++) {
            await callback(array[index], index, array)
          }
        }
        
        //iterate through each leg using key/value pairs for leg, waitFor & speed values
        const start = async () => {
          await asyncForEach(arr, async (num) => {
            await waitFor(num.waitFor*10)
            var leg = L.Polyline.fromEncoded(num.polyline)
            var myMovingMarker = L.Marker.movingMarker(leg.getLatLngs(), num.duration*10).addTo(map);
            myMovingMarker.start();
            setTimeout(function() {
                myMovingMarker.remove();
            }, num.duration*10);
          })
          //log done when all legs are finished
          console.log('Done')
        }
        //start the await/sync 
        start()

    // this will show all legs as one big route                                 
    $.each(response.currentTravel.legs, function(index) { 

    var polyline = L.Polyline.fromEncoded(response.currentTravel.legs[index].polyline);
    polyline.addTo(map);        
    
});
});

使用基于腿的持续时间的等待/同步和结果中的等待添加我成功地将多段线阵列中的所有多段线绘制为一条路线，然后在路线的开头开始移动标记，在某个给定点遵循路线上的特定速度，同时在另一个移动标记开始时删除标记。

希望有人能在需要时找到这篇文章。再见！

传单，折线数组上的动画标记（JS）

1 个答案: