文章/答案/技术大牛

发布

问带有*ngIf的AGM映射
EN

Stack Overflow用户

提问于 2020-01-29 18:33:31

回答 1查看 472关注 0票数 0

我试图显示一个标记标签，但仅在特定的缩放级别或更高的级别，但它不允许我使用*ngIf。

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

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

Component.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>

angular

agm-map

回答 1

Stack Overflow用户

发布于 2020-02-07 08:42:28

您不能绑定到*ngIf中的属性(即[label]="")。

相反，在模板中去掉*ngIf，并将[label]绑定到一个返回正确对象的方法。

示例：

component.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 : {};
  }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59965196

复制

相似问题

问带有*ngIf的AGM映射
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有*ngIf的AGM映射EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有*ngIf的AGM映射
EN