使用angular和AGM在第一次加载时渲染时需要太多时间

Question

我正在使用Angualr 5和AGM Angular Google Maps并使用* ngFor在数据源更新时更新地图引脚 问题是一旦数据加载（420点）屏幕冻结并保持30秒然后使用渲染点

HTML：

<agm-marker  *ngFor="let point of points; trackBy: trackByFn" class="point"  [latitude]="point.lat" [longitude] ="point.long" >
            <agm-info-window>Name: {{point.Title}} <br/> Address: {{point.Desc}} </agm-info-window>
    </agm-marker>

为：

trackByFn(index, point)  {
    console.log(point);
    return point ? point.title : undefined;
  }

updatePoints(newPoints:Array<mapDto>)
{
    this.points = new Array<mapDto>();
    this.points = newPoints;
}

Answer 1

我不确定这是否导致了这个问题，也许不是，但trackByFn应该返回一些独特的东西。因此，除非您确定所有项目都具有唯一标题，否则请勿使用它。或者也许尝试一些lat + long + title的复合？

一个可能的瓶颈是每个标记内的agm-info窗口。它也可以独立运行，尝试将其取出并只使用其中一个。