使用ngFor循环变量时Agm-marker无法正常显示问题求助

结合你使用的@agm/core": "^1.0.0-beta.2版本和代码情况，硬编码正常但用REST返回的games变量不显示marker，大概率是下面几个常见原因，你可以逐一排查：

1. 异步数据加载时机没处理好 #

REST请求是异步的，地图初始化的时候games可能还是空数组，AGM不会自动监听数组变化重新渲染marker。

解决办法分两种情况：

• 如果games是直接赋值的数组（比如用subscribe获取后赋值）：给地图加*ngIf确保数据加载完成后再渲染地图

  <agm-map *ngIf="games && games.length > 0" [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker *ngFor="let g of games" [latitude]="g.lat" [longitude]="g.lng"></agm-marker>
  </agm-map>
  

• 如果games是Observable类型：直接用async pipe自动处理异步订阅和变更检测

  <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
    <agm-marker *ngFor="let g of games | async" [latitude]="g.lat" [longitude]="g.lng"></agm-marker>
  </agm-map>
  

2. 经纬度数据类型不匹配 #

AGM的latitude和longitude要求是数字类型，如果REST返回的g.lat/g.lng是字符串格式，就会导致marker不显示。

解决办法：在获取数据后把字符串转为数字：

this.yourRestService.getGames().subscribe(rawGames => {
  this.games = rawGames.map(game => ({
    ...game,
    lat: Number(game.lat),
    lng: Number(game.lng)
  }));
});

3. 模块导入不完整（beta版本特有） #

在@agm/core的beta版本中，AgmMarkerModule需要单独导入，否则marker组件不会被识别。检查你的模块配置：

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

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: '你的谷歌地图API密钥' // 这里必须配置有效密钥，否则地图可能加载异常
    }),
    AgmMarkerModule
  ]
})
export class YourFeatureModule { }

4. Marker不在地图可视范围内 #

如果你的marker经纬度和地图初始化的lat/lng差距过大，marker会在可视区域外，看起来像没显示。可以让地图自动适配所有marker的范围：

1. 模板给地图添加模板引用变量

<agm-map #agmMap="agmMap" [latitude]="lat" [longitude]="lng" [zoom]="zoom">
  <agm-marker *ngFor="let g of games" [latitude]="g.lat" [longitude]="g.lng"></agm-marker>
</agm-map>

2. 组件中获取地图实例并调整边界

import { ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';

// ...组件类内部
@ViewChild('agmMap') agmMap: AgmMap;

// 在数据加载完成后执行
this.yourRestService.getGames().subscribe(games => {
  this.games = games;
  // 计算所有marker的边界
  const bounds = new google.maps.LatLngBounds();
  games.forEach(g => bounds.extend(new google.maps.LatLng(g.lat, g.lng)));
  // 让地图自动适配边界
  this.agmMap.fitBounds(bounds);
});

建议先排查前两个问题，这是最容易踩坑的点。

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