使用Angular 6的google地图上的标记

npm install @agm/core --save

import { AgmCoreModule } from '@agm/core';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ],
  // ...
})
export class AppModule { }

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

@Component({
  selector: 'app-map',
  template: `<agm-map [latitude]="lat" [longitude]="lng">
               <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
             </agm-map>`
})
export class MapComponent {
  lat = 51.678418;
  lng = 7.809007;
}

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

@Component({
  selector: 'app-map',
  template: `
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
      <agm-marker *ngFor="let m of markers; let i = index"
                  [latitude]="m.lat"
                  [longitude]="m.lng"
                  [label]="m.label"
                  [iconUrl]="m.iconUrl">
      </agm-marker>
    </agm-map>`
})
export class MapComponent {
  lat = 51.678418;
  lng = 7.809007;
  zoom = 14;

  markers = [
    { lat: 51.678418, lng: 7.809007, label: 'A', iconUrl: 'path/to/icon.png' },
    // 更多标记...
  ];
}