Angular 6中Google Maps标记问题：mapReady内locations未定义

你完全猜对了！mapReady确实大概率会比你的异步数据请求更早触发，这就是mapReady里this.locations为undefined的核心原因。

执行流程拆解： #

1. 组件初始化时ngOnInit立即执行，调用getListings()发起HTTP请求——但HTTP请求是异步操作，浏览器不会等待请求完成，会继续执行后续的模板渲染逻辑。
2. Angular渲染模板时，<agm-map>组件加载完成后立刻触发mapReady事件，此时异步请求还在等待服务器响应，this.locations还未被赋值，所以打印值为undefined，创建标记的循环也不会执行。
3. 服务器返回数据后，extractlistings才会被调用，this.locations被正确赋值，但此时mapReady已经执行完毕，自然不会再创建标记。

另外还要注意一个隐藏细节：你的locations数组中lat和long是字符串类型，而Google Maps Marker的position需要数字类型的经纬度，直接使用会导致标记无法正确显示，这个也要同步修复。

下面提供两种实用的解决思路，你可以根据代码习惯选择：

方案一：存储地图实例，数据加载后补创建标记 #

分别跟踪地图实例和数据状态，不管哪一方先就绪，都等待另一方完成后再执行标记创建逻辑：

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

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  locations: Array<{id: number, lat: string, long: string}> = [];
  private mapInstance: google.maps.Map | undefined; // 存储地图实例

  constructor(private serviceHomeScreen: YourService) {}

  ngOnInit() { 
    this.getListings();
  }

  getListings() { 
    this.serviceHomeScreen.getAllListingsDetails().subscribe((data) => { 
      this.extractlistings(data[0]);
      // 数据加载完成后，若地图已初始化则直接创建标记
      if (this.mapInstance) {
        this.addMarkersToMap(this.mapInstance);
      }
    });
  }

  extractlistings(data) { 
    this.locations = data;
    console.log(this.locations[1]); // 值正确
  }

  mapReady(map: google.maps.Map) { 
    this.mapInstance = map;
    // 地图初始化完成后，若数据已加载则直接创建标记
    if (this.locations.length > 0) {
      this.addMarkersToMap(map);
    }
  }

  // 抽离标记创建逻辑，提升复用性
  private addMarkersToMap(map: google.maps.Map) {
    for (const location of this.locations) {
      console.log("aici");
      new google.maps.Marker({
        position: { 
          lat: Number(location.lat), // 字符串转数字
          lng: Number(location.long)
        },
        map: map,
      });
    }
  }
}

方案二：用RxJS组合流，等待两个条件同时满足 #

如果项目已使用RxJS，可以用combineLatest监听地图就绪和数据加载两个事件，仅当两者都完成后才执行标记创建：

import { Component, OnInit } from '@angular/core';
import { combineLatest, Subject } from 'rxjs';
import { take } from 'rxjs/operators';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  locations: Array<{id: number, lat: string, long: string}> = [];
  private mapReady$ = new Subject<google.maps.Map>(); // 用Subject发射地图就绪事件

  constructor(private serviceHomeScreen: YourService) {}

  ngOnInit() { 
    // 同时等待地图就绪和数据加载完成
    combineLatest([
      this.mapReady$.pipe(take(1)), // 只取第一次地图就绪事件
      this.serviceHomeScreen.getAllListingsDetails().pipe(take(1)) // 只取一次数据
    ]).subscribe(([map, data]) => {
      this.locations = data[0];
      this.addMarkersToMap(map);
    });
  }

  mapReady(map: google.maps.Map) { 
    this.mapReady$.next(map); // 发射地图就绪事件
  }

  private addMarkersToMap(map: google.maps.Map) {
    for (const location of this.locations) {
      new google.maps.Marker({
        position: { 
          lat: Number(location.lat),
          lng: Number(location.long)
        },
        map: map,
      });
    }
  }
}

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