如何在agm-core中实现后端多边形数据同步？绘图不显示求助

嘿，我一眼就发现两个核心问题导致你的多边形显示不出来，咱们一步步拆解解决：

第一个坑：局部变量覆盖了组件属性 #

你在getSitePoints的subscribe回调里声明了局部的pointsArray（const pointsArray = []），但从来没把这个填充好的数组赋值给组件的this.pointsArray！这就导致组件类里的pointsArray始终是空的，多边形自然拿不到数据。

先修复这个问题，直接把API返回的数据映射到组件的pointsArray上：

getSitePoints() { 
  this.siteAPI.getPoints(this.route.snapshot.paramMap.get('id')) 
    .subscribe((response) => { 
      this.sitePoints = response; 
      // 直接给组件的pointsArray赋值，不要用局部变量
      this.pointsArray = this.sitePoints.map(item => item.Location);
      console.log(this.pointsArray); // 现在打印的是组件的有效数组
      // 数据到位后，立刻更新多边形
      this.updatePolygon();
    }); 
}

第二个坑：异步时序不匹配 #

onMapReady是地图加载完成就触发，而API请求是异步的——大概率地图加载完的时候，数据还没返回，所以此时创建的多边形用的是空数组。我们需要把多边形的创建/更新逻辑和数据、地图的就绪状态绑定起来。

方案1：拆分逻辑，按需更新多边形 #

先把地图实例和多边形实例保存为组件属性，然后抽离多边形的初始化/更新方法：

// 组件类里新增属性
polygon?: google.maps.Polygon;
mapInstance?: google.maps.Map;

onMapReady(map: google.maps.Map) { 
  this.mapInstance = map; // 保存地图实例，后续更新要用
  this.initDrawingManager(map); 
  // 地图加载后，先检查数据是否已经到位
  if (this.pointsArray.length > 0) {
    this.initOrUpdatePolygon();
  }
}

// 单独的多边形初始化/更新方法
initOrUpdatePolygon() {
  if (!this.mapInstance) return; // 确保地图实例存在

  const polygonOptions = {
    paths: this.pointsArray, 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    editable: true, 
    draggable: true, 
    map: this.mapInstance // 绑定到地图
  };

  if (this.polygon) {
    // 如果多边形已经存在，只更新路径即可
    this.polygon.setPaths(this.pointsArray);
  } else {
    // 否则创建新的多边形
    this.polygon = new google.maps.Polygon(polygonOptions);
  }
}

这样不管是地图先加载好，还是数据先返回，都能保证多边形拿到有效数据：

• 如果数据先返回，地图加载后会立刻调用initOrUpdatePolygon
• 如果地图先加载，数据返回后会通过getSitePoints里的this.updatePolygon()触发更新

方案2：用RxJS组合操作符（更优雅） #

如果你熟悉RxJS，可以用combineLatest来等待地图就绪和数据返回两个条件都满足后，再创建多边形，从根源上避免时序问题：

// 组件类里新增Subject，用来发送地图就绪信号
private mapReady$ = new Subject<google.maps.Map>();

onMapReady(map: google.maps.Map) { 
  this.initDrawingManager(map); 
  this.mapReady$.next(map); // 发送地图就绪的信号
}

ngOnInit() {
  // 组合地图就绪和API请求的Observable
  combineLatest([
    this.mapReady$,
    this.siteAPI.getPoints(this.route.snapshot.paramMap.get('id'))
  ]).subscribe(([map, sitePoints]) => {
    this.sitePoints = sitePoints;
    this.pointsArray = sitePoints.map(item => item.Location);
    // 此时地图和数据都准备好了，直接创建多边形
    this.polygon = new google.maps.Polygon({
      paths: this.pointsArray, 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      editable: true, 
      draggable: true, 
      map: map
    });
  });

  // 别忘了在组件销毁时清理Subject，避免内存泄漏
}

ngOnDestroy() {
  this.mapReady$.complete();
}

最后要注意的细节 #

确保item.Location的格式是Google Maps能识别的：要么是google.maps.LatLng对象，要么是{lat: number, lng: number}的普通对象。如果后端返回的格式不对，需要在映射时转换，比如：

this.pointsArray = this.sitePoints.map(item => 
  new google.maps.LatLng(item.Location.latitude, item.Location.longitude)
);

内容的提问来源于stack exchange，提问作者Philippe Corrèges