Angularfire AGM需要显示多个标记

Question

我想在AGM地图上实时显示多个标记，此代码仅适用于一个标记。我刚说过要学习编程，所以……并向我推荐一个学习angular的教程。

应用组件：

constructor(public db: AngularFireDatabase){
    this.data = db.object('/raw-locations/8290/0').valueChanges();
}

应用程序Html：

<agm-map [latitude]="31.5718289" [longitude]="74.3690473">
    <agm-marker *ngIf="data"
        [latitude]="(data |async)?.lat"
        [longitude]="(data | async)?.lng"
        [label]="Stickcar"
        zoom="4"
        [iconUrl]="ico"
        [label]="label">

        <agm-info-window>{{ label }}</agm-info-window>
    </agm-marker>
</agm-map>

app commonent

app html

database stucture on firebase

Answer 1

您可以使用所有标记参数(纬度、经度、标签、iconUrl等)创建一个数组。在您的.ts文件中，然后使用*ngFor迭代所有它们：

App组件；

constructor(public db: AngularFireDatabase){
        this.locations = //Get all your markers
}

应用程序HTML：

<agm-map [latitude]="31.5718289" [longitude]="74.3690473">
    <agm-marker 
       *ngFor="let marker of locations"
        [latitude]="(marker |async)?.lat"
        [longitude]="(marker | async)?.lng"
        [label]="marker.label"
        zoom="4"
        [iconUrl]="marker.ico"
        [label]="marker.label">

        <agm-info-window>{{ label }}</agm-info-window>
    </agm-marker>
</agm-map>