Карта AGM с * ngIf - PullRequest
Новая
       23

Карта AGM с * ngIf

0 голосов
/ 29 января 2020

Я пытаюсь показать метку маркера, но только на определенном уровне масштабирования или выше, но она не позволяет мне использовать *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>

1 Ответ

0 голосов
/ 07 февраля 2020

Вы не можете привязать свойства (ie. [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({ 
blah
})
export class Component {
...
getMarker(point: any): any {

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

}

}

...