Question

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

RecyclerView

Answer 1

如果这可以帮助任何人...这是我发现唯一可行的方法。将[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 2

使用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 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>

Answer 4

为我工作

    <ng-containner *ngFor="let data of zones" >
                    <agm-marker [latitude]="data.latitude" [longitude]="data.longitude" [opacity]="(data?.hover)? 1 : 0.4" [label]="{fontSize: '12px',fontWeight: 'bold',text: ((data?.hover)? (data.name | titlecase) : null)}"></agm-marker>
                    <agm-circle [latitude]="data.latitude" [longitude]="data.longitude" [circleDraggable]="false" [editable]="false" [fillColor]="(data?.hover)? '#04397f' : data?.color" [radius]="data.radius" [strokeColor]="data.status == 'inactive' ? 'grey' : 'blue'" [strokeWeight]="2"></agm-circle>
    <ng-containner>

Agm标记标签

4 个答案: