Question

我正在使用Google Maps JS API在网络应用中创建位图-就像导航流程。该应用程序还使用React 我有一个纬度和经度点数组，并且正在进行一些计算以获取数组中下一个要为其标记设置动画的数字。

这样做是为了使标记保持在道路上，而不是将其移动到建筑物或类似物体上，无论如何，我都应该运行X次方法（假设5次）。

每个功能都是具有动态持续时间的动画功能我尝试使用异步等待，尝试超时，但似乎无法按正确的顺序获取该功能。

这是我分配给google.maps.marker原型的动画功能 [链接] https://raw.githubusercontent.com/combatwombat/marker-animate/master/markerAnimate.js

动画本身可以工作，但不是从点1到2，然后是3，然后是4，然后是5，而是直接到点5进行动画。

我认为问题是因为我正在使用for循环。我无法解决这个问题。这是示例代码：

for (
        let index = currentMarkerLocationIndex;
        index <= simPointsIndexes[simPointArrIndex];
        index++
    ) {
        let bounds = getBoundsPositions({ lat: this.state.simCoordinates[index].lat(), lng: this.state.simCoordinates[index].lng() },
            this.state.cusLocation
        );
        var { center, zoom } = fitBounds(bounds, this.state.windowSize);

        let x = await (async () => { //let x is used just for the await part
            return new Promise((resolve, reject) => {
                this.state.engMarker.animateTo(
                    this.state.simCoordinates[index],
                    {
                        easing: 'linear',
                        duration: (this.props.refreshRate * 1000) / slicedLengthSimCoordinatesArr.length,
                        complete: this.calcZoomAndCenter(zoom, center)
                    }
                );
            })
        }
        )
    }
    currentMarkerLocationIndex = simPointsIndexes[simPointArrIndex];
    simPointArrIndex++;

我想要：

this.state.engMarker.animateTo(this.state.simCoordinates[index], {options})

要在索引1上运行，请完成动画（动画本身具有持续时间），然后从1到2进行动画处理，依此类推。

关于我应该寻找什么的任何想法？

Google Maps标记动画未按正确的顺序运行

0 个答案: