javascript - How to set background color of marker label in AGM Angular 7? - Stack Overflow

admin管理员组

文章数量:1404924

 <agm-map  style="text-shadow: 0px 0px 8.2px yellow; color: red;" [latitude]='latitude'
    [longitude]='longitude' (mapClick)="onChoseLocation($event)" [zoom]=15 [usePanning]="true">
    <agm-marker *ngFor="let vehicle of data1;" [agmFitBounds]="true" 
      [latitude]='vehicle.lat' [longitude]='vehicle.lng' 
      [iconUrl]="{ url: './assets/images/cars.png', scaledSize: { width: 45, height: 45, rotation: vehicle.angle, anchor : {x:19, y:19} }}"
      [label]="{color: 'blue', fontWeight: 'bold', fontSize: '12px', backgroundColor:'red',  text: vehicle.name}">
      <agm-polyline *ngFor="let initialdata of vehicleDetail">
        <agm-polyline-point  [latitude]="initialdata.lat" [longitude]="initialdata.lng">
        </agm-polyline-point>
        <agm-polyline-point *ngIf="(vehicle.id == id)"  [latitude]="vehicle.lat" [longitude]="vehicle.lng">
        </agm-polyline-point>
      </agm-polyline>
      <agm-info-window [disableAutoPan]="true" #infoWindow [isOpen]="true">
        <small>
          Name: <small>{{vehicle.name}}</small> <br>
          Speed: <small>{{vehicle.speed}} km/h </small><br>
          <!-- Lng: <small>{{vehicle.lng}}</small> <br> -->
          Status: <small>{{vehicle.status}}</small>
        </small>
        <div>
          <a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right"></a>
        </div>
      </agm-info-window>
    </agm-marker>
  </agm-map>

I use background color property like that but its not work....

[label]="{color: 'blue', fontWeight: 'bold', fontSize: '12px', backgroundColor:'red',  text: vehicle.name}"

and I also want to set marginttop but its not working.

Name show above the picture.... but I want name blow the picture and background color red.

 <agm-map  style="text-shadow: 0px 0px 8.2px yellow; color: red;" [latitude]='latitude'
    [longitude]='longitude' (mapClick)="onChoseLocation($event)" [zoom]=15 [usePanning]="true">
    <agm-marker *ngFor="let vehicle of data1;" [agmFitBounds]="true" 
      [latitude]='vehicle.lat' [longitude]='vehicle.lng' 
      [iconUrl]="{ url: './assets/images/cars.png', scaledSize: { width: 45, height: 45, rotation: vehicle.angle, anchor : {x:19, y:19} }}"
      [label]="{color: 'blue', fontWeight: 'bold', fontSize: '12px', backgroundColor:'red',  text: vehicle.name}">
      <agm-polyline *ngFor="let initialdata of vehicleDetail">
        <agm-polyline-point  [latitude]="initialdata.lat" [longitude]="initialdata.lng">
        </agm-polyline-point>
        <agm-polyline-point *ngIf="(vehicle.id == id)"  [latitude]="vehicle.lat" [longitude]="vehicle.lng">
        </agm-polyline-point>
      </agm-polyline>
      <agm-info-window [disableAutoPan]="true" #infoWindow [isOpen]="true">
        <small>
          Name: <small>{{vehicle.name}}</small> <br>
          Speed: <small>{{vehicle.speed}} km/h </small><br>
          <!-- Lng: <small>{{vehicle.lng}}</small> <br> -->
          Status: <small>{{vehicle.status}}</small>
        </small>
        <div>
          <a (click)="onClickInfoView({id:m.id})" class="btn btn-attention pull-right"></a>
        </div>
      </agm-info-window>
    </agm-marker>
  </agm-map>

I use background color property like that but its not work....

[label]="{color: 'blue', fontWeight: 'bold', fontSize: '12px', backgroundColor:'red',  text: vehicle.name}"

and I also want to set marginttop but its not working.

Name show above the picture.... but I want name blow the picture and background color red.

• javascript
• angular
• typescript
• google-maps
• angular-google-maps

Share Improve this question Follow edited Mar 25, 2019 at 9:36 BDL 22.2k3232 gold badges5454 silver badges6262 bronze badges asked Mar 22, 2019 at 11:18 Rohindra YadavRohindra Yadav 8911 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can use labelOrigin:{x:12,y:27} property for [iconUrl] to change the label position. like this: [iconUrl]="{ url: './assets/images/cars.png', scaledSize: { width: 45, height: 45, rotation: vehicle.angle, anchor : {x:19, y:19} }, labelOrigin:{x:12,y:27}}

add following style in your styles.css for change background color.

.gm-style div[aria-hidden="true"]{
    background-color: white !important;
    padding: 5px;
    border-radius: 5px;
}

本文标签： javascriptHow to set background color of marker label in AGM Angular 7Stack Overflow