地图花费过多时间在使用角和AGM进行首次加载时进行渲染

Question

I am using Angualr 5 with AGM Angular Google Maps and using *ngFor to update the maps pins when datasource updated The problem is the screen freezes once the data is loaded (420 point) and stays for 30 seconds then works with the points rendered

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>

as:

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

I'm not sure if this is causing this problem, maybe not, but trackByFn should return something unique. So unless you can be sure that all items have a unique title, don't use it. Or maybe try some composite of lat+long+title?

One possible bottleneck is an agm-info-window inside every marker. It also works standalone, try taking it out and having just one of those.