如何在Angular 4中使用Angular Google Map API添加多个地图标记

没问题，我来帮你搞定这个需求！你已经有了城市经纬度数组，只需要用Angular的*ngFor指令循环渲染agm-marker就能实现多个标记的展示，具体步骤如下：

1. 调整组件类代码 #

首先确保你的组件类里有地图中心坐标、缩放级别、标记图标地址，以及你的城市数组：

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

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent {
  // 取第一个城市的坐标作为地图默认中心
  latitude: number = this.cities[0].lat;
  longitude: number = this.cities[0].longi;
  zoom: number = 15; // 这个缩放级别能让你的几个标记都清晰显示
  iconUrl: string = 'your-custom-marker.png'; // 替换成你实际的标记图标地址

  // 你的城市经纬度数组
  cities = [ 
    {lat: 12.972442, longi: 77.580643}, 
    {lat: 12.972234, longi: 77.580233}, 
    {lat: 12.972123, longi: 77.580623} 
  ];
}

2. 修改模板代码（关键部分） #

在你的模板里，用*ngFor遍历cities数组，为每个城市生成一个agm-marker，替换原来的单个标记：

<div id="map">
  <agm-map 
    [latitude]="latitude" 
    [longitude]="longitude" 
    [scrollwheel]="false" 
    [zoom]="zoom">
    <!-- 循环生成每个城市的标记 -->
    <agm-marker 
      *ngFor="let city of cities"
      [iconUrl]="iconUrl"
      [latitude]="city.lat"
      [longitude]="city.longi">
    </agm-marker>
  </agm-map>
</div>

额外提示 #

• 别忘了确认你已经正确安装并导入了AGM模块：在AppModule里添加AgmCoreModule.forRoot({ apiKey: '你的谷歌地图API密钥' })
• 如果想要每个标记用不同的图标，可以在cities数组里给每个对象加iconUrl字段，然后模板里绑定[iconUrl]="city.iconUrl"
• 如果需要让地图自动适配所有标记的范围，可以计算所有城市的经纬度极值，然后设置地图中心和缩放级别（也可以通过AGM的fitBounds属性快速实现）

内容的提问来源于stack exchange，提问作者Anil