0

如何根据状态值更改 agm-map iconUrl？例如，在我下面的数据中，我遍历标记*ngFor="let m of markers; let i = index"，每个 m 都有一个状态。我的问题是我们如何根据状态更改 [iconUrl]

因此，如果状态等于打开 [iconUrl] 是 assets/icons/map/openmarker.png ，如果状态等于关闭则 [iconUrl] 是 assets/icons/map/closemarker.png

每个状态都有不同的 iconUrl 资产，我们如何做到这一点？有人有想法吗？将不胜感激。谢谢。

如下图，2 个标记有不同的状态，一个应该是红色或不同的资产，默认为蓝色。

在此处输入图像描述

#示例状态是

open
close
dead

＃代码

<agm-map *ngIf="!isMapLoading" [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="true" [fitBounds]="fitBounds" (mapReady)="mapIsReady($event)" (mapClick)="mapClicked($event)">                    
                                    <agm-marker-cluster imagePath="{{mapClusterUrl}}">
                                            <agm-marker [iconUrl]="mapMarkerIcon" *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(agmInfoWindow)" (markerDblClick)="viewPropertyDetails(m)" [latitude]="m.lat" [longitude]="m.lng" [markerDraggable]="m.draggable" [agmFitBounds]="true" (dragEnd)="markerDragEnd(m, $event)">
                                                    <agm-info-window #agmInfoWindow>
                                                            <div style="font-weight:500;width:200px;padding-right:10px">
                                                                <div class="flex" style="align-items: center;justify-content:space-between;">

                                                                    <p style="font-size:14px;cursor:pointer; margin-bottom:2px;" (click)="viewPropertyDetails(m)">{{m.status}}</p>


                                                                    <p style="font-size:14px;cursor:pointer; margin-bottom:2px;" (click)="viewPropertyDetails(m)">{{m.propertyName}}</p>
                                                                    <mat-icon style="cursor:pointer" (click)="closeAgmWindow(agmInfoWindow)">close</mat-icon>
                                                                </div>
                                                                    <p style="font-size:12px;" class="secondary-text">{{m.propertyAccountId}}</p>
                                                                    <p class="secondary-text flex" style="font-size:10px;margin-bottom:0px">
                                                                            <mat-icon color="primary" style="font-size: 16px;">room</mat-icon>
                                                                            {{m.addressLine1}}, {{m.city}}, {{m.state}} {{m.postalCode.split('-')[0]}}
                                                                    </p>
                                                            </div>
                                                    </agm-info-window>
                                            </agm-marker>
                                    </agm-marker-cluster>
                            </agm-map>

#Ts 代码 - 用于拉取标记数据的代码

  mapMarkerIcon = "assets/icons/map/marker.png";
  getmarkerinfo(filterModel: any) {
    this.Service.getmarkerinfo(filterModel)
      .pipe(
        finalize(() => {
          this.isMapLoading = false;
        }
        ),
      ).subscribe({
        next: (res) => {
          if (res.data) {
            this.markers = res.data
          }
        },
        error: err => noop,
        complete: () => {
       });
  }

#example 标记数据

[{
    "id": 1,
    "name": "Store1",
    "status": "Open"

},
{
    "id": 2,
    "name": "Store2",
    "status": "Close"

}]
4

1 回答 1

0 
<agm-marker [iconUrl]="getMarkerUrl(m.status)"......></agm-marker>

接着

getMarkerUrl(status:string){
    if(status === "open"){
        return "assets/icons/map/openmarker.png";
    }

    ...//Other conditions
}
于 2022-02-08T18:49:14.900 回答