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

我检查了这个答案，但这对我没有用。

Answer 1

要自定义样式，可以为label指定以下属性：

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

通过指定如下的Icon.scaledSize值，可以通过iconUrl属性通过<{>}标记

放置：

<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

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

1 个答案: