angular-google-map добавить текст под каждым маркером

Question

app.component.html

    <h1 *ngFor="let m of markers;">{{ m.lat }}</h1>


    <agm-map [latitude]="lat" [longitude]="lng" [styles]="styles">

        <agm-marker *ngFor="let m of markers;let i = index"
            [latitude]="m.lat"
            [longitude]="m.lng"
            [label]="m.label"
            [animation]="'DROP'" 
            [iconUrl]="'favicon.ico'"       
            >
        </agm-marker>
    </agm-map>

ap.component.ts

    import { Component } from '@angular/core';

    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    markers: any[] = [
        {
        lat: 12.971599,
        lng: 77.594566,
        label: 'A',
        draggable: false
        },
        {
        lat: 12.671599,
        lng: 77.894566,
        label: 'B',
        draggable: false
        },
        {
        lat: 12.771599,
        lng: 77.564566,
        label: 'C',
        draggable: false
        },
        {
        lat: 12.771599,
        lng: 77.424566,
        label: 'D',
        draggable: true
        }
    ]

    styles = [{
        featureType: 'poi',
        elementType: 'labels.text.fill',
        // stylers: [{color: '#0099ff'}]
    }
    ];


    title: string = 'My first AGM project';
    lat: number = 12.971599;
    lng: number = 77.594566;

    getMapData(event){
        console.log(event)
    }

    }

Здесь я поделился своим шаблоном и компонентом.

Как я могу поделитьсянемного текста для каждого маркера (текст может быть снизу или сбоку от каждого маркера).

Пожалуйста, если есть идеи, как мы можем это сделать.

Angular 4 Google Maps, как добавитьописание к маркеру

Я проверил этот ответ, но у меня это не сработало.

Answer 1

Для настройка стиля Могут быть указаны следующие свойства для label:

export interface MarkerLabel {
  color: string;
  fontFamily: string;
  fontSize: string;
  fontWeight: string;
  text: string;
}

Метка маркера может быть позиционирована через iconUrl свойство, указавIcon.scaledSize значение, подобное этому:

<agm-marker *ngFor="let loc of locations" [label]="loc.label" [latitude]="loc.lat" [longitude]="loc.lng" [iconUrl]="icon" >
</agm-marker>

, где

icon = {
    labelOrigin: { x: 16, y: 48 },
    url: "http://maps.google.com/mapfiles/kml/paddle/red-blank.png",
};

Вот демоверсия