angular-google-map 在每个标记下添加文本答案

【问题标题】：angular-google-map add text under each markerangular-google-map 在每个标记下添加文本
【发布时间】：2019-03-07 17:41:46
【问题描述】：

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 how to add description to marker

我检查了这个答案，但是这对我不起作用。

【问题讨论】：

标签： angular angular-google-maps

【解决方案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",
};

Here is a demo

【讨论】：