Question

我想在AGM地图上实时显示多个标记，此代码仅适用于一个标记。我刚刚开始学习如何编写代码...并且还向我推荐了一个学习角度的教程。

应用组件：

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

App 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

您可以在.ts文件中创建一个包含所有标记参数（纬度，经度，标签，iconUrl等）的数组，然后使用* ngFor迭代所有这些参数：

App Component;

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>

Angularfire AGM需要显示多个标记

1 个答案: