Agm标记标签

Question

如何设置agm-marker-label的样式 - 将文本设置为居中的最大宽度？我可以更改标签位置但不能为集中标签名称设置最小宽度。

<agm-marker *ngIf="school.lat && school.lng" 
                    [iconUrl]="{url: school.mapMarker, scaledSize: {height: 75,width: 48},labelOrigin:{x:70,y:20}}"
                    [label]="{text:school.schoolName}"
                    [longitude]="school.lng | parseFloat"
                    [latitude]="school.lat | parseFloat">
        </agm-marker>

Answer 1

使用2 [label]属性对我不起作用。相反，以下工作：

<agm-marker
        *ngFor="let sp of mySPlist"
        [latitude]="sp.geoLat" [longitude]="sp.geoLon"
        [iconUrl]="sp.icon"
        [label]="{color: 'white', text: sp.name}"
      >
</agm-marker>

Answer 2

如果这有助于任何人...这是我发现的唯一有用的东西....把[label]="labelOptions"放在你的标记中，然后在ts文件中定义css就像这样......

labelOptions = {
    color: 'white',
    fontFamily: '',
    fontSize: '14px',
    fontWeight: 'bold',
    text: "some text"
}


<agm-marker  *ngFor="let data of serviceProvider; let i = index" [latitude]="data.Geolocation__c.latitude" [longitude]="data.Geolocation__c.longitude" [label]="labelOptions" [label]="{i+1}"> 
    <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
        <ng-template>
            {{ i+1}}
        </ng-template>
    </agm-snazzy-info-window>
</agm-marker>
</agm-map><br/>

Answer 3

简单的样式标签适合我：

    <agm-map style="text-shadow: 0px 0px 6.2px grey;"(mapReady)="onMapReady($event)" #map (mapClick)="mapClicked($event)" [scrollwheel]="mapScWheel"
                                 [latitude]="center?.lat" [longitude]="center?.lng" [styles]="styleArray"
                                 [keyboardShortcuts]="true" [usePanning]="true" [fullscreenControl]="true"
                                 [style.height.px]="getMapHeight()" [clickableIcons]="false"
                                 [zoomControl]=true [zoom]="mapZoom">
                            <agm-marker *ngFor="let device of devices"
                                    [label]="device?.labelOptions"
                                    [iconUrl]="{url: device.iconUrl,labelOrigin:{x:22.5,y:20}, scaledSize: {height: 45,width: 45}}"
                                    [latitude]="device?.latitude"
                                    [longitude]="device?.longitude"
                                    class="agm-marker">
                            </agm-marker>
   </agm-map>