Question

我组件的目标是从数据库获取点（纬度，经度）以在Google地图上绘制多边形。 Google地图已正确实现，并显示为带有ok的图形管理器。

我的问题更多是声明问题。

我在地图上有以下代码：

onMapReady(map) {
  this.initDrawingManager(map);
  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,
  });
}

在ngOnInit()上，我得到以下格式的所有要点：

我使用组件代码底部的此功能集来获取它：

getSitePoints() {
  this.siteAPI.getPoints(this.route.snapshot.paramMap.get('id'))
    .subscribe((response) => {
      this.sitePoints = response;
      const pointsArray = [];
      this.sitePoints.map((item) => {
        pointsArray.push(item.Location);
        console.log(pointsArray);
        console.log('item:' + item.Location);
      });
    });
}

由于在onMapReady事件上完成了多边形绘制，并且在订阅后填充了我的数组，因此在函数中不显示多边形。就像当图形管理器接收到它为空时一样。不知道如何检查。

此外，声明是：

pointsArray = [];
sitePoints: any;

任何帮助将不胜感激。预先感谢您的帮助。

最好的问候

Answer 1

我终于成功解决了我的问题。感谢大家的支持。

考虑到整个角度组件lifeCycle会在浏览器刷新时重新运行，因此解决方案并非解决方案。使用lifeCycles并不是管理异步数据的方法。

解决方案是在subscribe（）上获取来自DB的点，然后绘制多边形以确保之前已接收到数据。

像下面这样：

this.pointsArray = [];
    this.siteAPI.getPoints(this.route.snapshot.paramMap.get('id'))
        .subscribe(
          response => {
          this.sitePoints = response;
          this.pointsArray = [];
          this.sitePoints.map((item) => {
            this.pointsArray.push(item.Location);
          });
        }
        ,
        err => {},
        () => {
        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,
          });
        // Set polygon to map
        this.polygon.setMap(map);
        }
        );}

Answer 2

好像您没有将数据保存在class属性中。

getSitePoints() {
  this.siteAPI.getPoints(this.route.snapshot.paramMap.get('id'))
    .subscribe((response) => {
      this.sitePoints = response;
      //const pointsArray = []; <--- Remove
      this.sitePoints.map((item) => {
        //pointsArray.push(item.Location); <-- issue
        this.pointsArray.push(item.Location);
        console.log(this.pointsArray);
        console.log('item:' + item.Location);
      });
    });
}

如何使用agm-core从骨干管理多边形数据同步？

2 个答案: