时间戳

首页 > 解决方案 > 使用 *ngIf 的 AGM 地图

angular - 使用 *ngIf 的 AGM 地图

问题描述

我正在尝试显示标记标签，但只能在某个缩放级别或更高级别上显示，但它不允许我使用*ngIf.

<div *ngIf="[zoom]=>15"        
[label]="{color: 'yellow', text: point.ID, fontSize: '4'}" 
</div>

如何在 Angular Agm Map 的某个缩放级别上显示标记或其标签？

组件.html

<body>

    <div class="map-body">    
        <agm-map class="ngmap" style="text-shadow: 0px 0px 6.2px grey;" 
        [latitude]="30" [longitude]="-79" [styles]="mapStyle" 
        [zoom]="13" [streetViewControl]="false" (mapReady)="onMapReady($event)">            

            <agm-marker         
                *ngFor="let point of points"                
                [latitude]="point.latitude"
                [longitude]="point.longitude" 
                *ngIf="zoom=>15" [label]="{color: 'yellow', text: point.ID, fontSize: '4'}" 
                else [label]=""
                [openInfoWindow]="true"
                (mouseOver)="infoWindow.open();"
                (mouseOut)="infoWindow.close();"
                [iconUrl]="{url:'.././assets/images/icons8-50.png',
                    scaledSize: {height: 20, width: 20}
                    }"                
                >
            <agm-info-window
                [disableAutoPan]="true" #infoWindow>{{point.test}}: <br>{{point.Name}}
            </agm-info-window>                
            </agm-marker
            >            
        </agm-map>
    </div>
</body>

标签： angularagm-map

解决方案

你不能绑定到[label]=""里面的属性（即）*ngIf。

相反，摆脱*ngIf模板并绑定[label]到返回正确对象的方法。

例子：

组件.html：

<agm-marker *ngFor="let point of points" [latitude]="point.latitude" [longitude]="point.longitude"
  [label]="getMarker(point)" [openInfoWindow]="true" (mouseOver)="infoWindow.open();" (mouseOut)="infoWindow.close();"
  [iconUrl]="{url:'.././assets/images/icons8-50.png', scaledSize: { height: 20, width: 20 }>

在 component.ts 上

@Component({ ... })
export class Component {
  getMarker(point: any): any {
    const marker = { color: 'yellow', text: point.ID, fontSize: '4' };
    return (this.zoom >= 15) ? marker : {};
  }
}

推荐阅读