如何从 Angular Google Maps 获取新坐标？ （角度 6）

Question

背景：

大家好，最近几天我一直在努力使用 Angular 谷歌地图 (AGM) API。 我正在构建一些非常简单的东西，我有要传递给 AGM 指令的坐标列表（经度和纬度），一切正常，我能够看到地图上的点，查看图像（线图像和多边形图像):

线条图像：

多边形图像：

这是我显示线条和显示多边形的角度代码。

<agm-map #agmMap class="d-agm-map-container" [zoom]="zoom" [latitude]="latitude" [longitude]="longitude">

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length === 2">
    <agm-polyline [strokeColor]="'red'" [editable]="true" (lineMouseUp)="lineChange($event)">
      <ng-container *ngFor="let point of shape.Points">
        <agm-polyline-point [latitude]="point.lat" [longitude]="point.lng">
        </agm-polyline-point>
      </ng-container>
    </agm-polyline>
  </span>

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length > 2">
    <agm-polygon [paths]="shape.Points" [fillOpacity]="0.1" [strokeOpacity]="0.5" [fillColor]="'red'"
      [strokeWeight]="1" [visible]="true" [zIndex]="1" [editable]="true" (polyMouseUp)="polygonChanged($event)"></agm-polygon>
  </span>

</agm-map>

问题从我改变一个点开始，第一个问题是我原来的点列表没有改变，我肯定能理解为什么，所以我开始检查 AGM 文档，搜索了一段时间后我看到了是一个名为“getPoints()”的函数，但仅适用于线条，我尝试过它，似乎即使在我更改点之后，该函数也会返回原始点的列表而不是新点。

所以我一直在寻找多边形 API 并没有什么实际帮助，有一些内置函数可以返回点列表，但不幸的是它不是更改后的坐标，而是旧坐标（原始坐标）。

---

寻找解决方法：

我开始检查指令的事件发射器，它似乎更有帮助，我为线添加了事件发射器，为多边形添加了事件发射器，我从它们收到的结果如下：

多边形编辑：

因此，当“鼠标向上”时，事件发射器会得到新的坐标和更改的顶点，这似乎效果更好，我可以构建一些简单的算法来将新的顶点或边以正确的顺序放置在我的列出并完成它，但是有没有简单的方法来获得积分？我错过了什么吗？

行编辑：

同样的事情发生在 line 上，我也可以在这里构建一个简单的算法，该算法知道如何根据新的事件发射器执行，但同样，这是正确的方法吗？是否有一些简单的函数或技术可以从指令中获取点列表？

---

问题结束：

我也用谷歌搜索了一个解决方案，但没有任何帮助，一些解决方案适用于 angularJS，或者其他解决方案不起作用，非常感谢您阅读本文，如果有同样的问题，我会很高兴如果你能分享你将如何处理这个问题。

附加信息： Polygon Docs Line Docs

Answer 1

所以我必须解决这个问题，这是我现在的解决方案，只需实现简单的 if 语句并添加新的发射坐标并将它们插入到我的列表中的正确位置，最终看起来这没什么大不了的全部。

我对这个问题的解决方案是这样的，每次我们从 AGM 指令中获取事件发射时，我们需要检测 2 个重要的东西，如果我们得到“顶点”或“边缘”，如果我们得到 顶点 在我们的对象中，因此用户已经移动了一些 exist 顶点，因此我们将访问我们的坐标列表并更新坐标。

如果我们的对象中有 edge，因此用户想要将 new point 添加到形状中，因此我们将在列表中的索引处插入新点（edge + 1)。

在我的示例中，这是我的形状模型，其中包含点列表。

export class ShapeModel {
    //#region Members
    public ID: number;
    public Title: string;
    public Points: PointModel[];
    //#endregion
}

export class PointModel {
    //#region Members
    public ID: number;
    public lat: number;
    public lng: number;
    public Order: number;
    //#endregion
}

---

这是解决这个问题的代码。

打字稿：

  public shape: ShapeModel;

  public coordinateChangeDetected($event): void {
    console.log('coordinateChangeDetected($event)', $event);

    if (this.isObjectNullOrUndefined($event) || this.isObjectNullOrUndefined($event.latLng)) {
      console.error('No event has emitted through the AGM Directive.');
      return;
    }

    const newLatitude = $event.latLng.lat();
    const newLongitude = $event.latLng.lng();

    if ($event.vertex !== undefined) {
      this.shape.Points[$event.vertex].lat = newLatitude;
      this.shape.Points[$event.vertex].lng = newLongitude;
    } else if ($event.edge !== undefined) {
      const point = new PointModel();
      point.lat = newLatitude;
      point.lng = newLongitude;
      this.shape.Points.splice($event.edge + 1, 0, point);
    }
  }

HTML：

<agm-map #agmMap class="d-agm-map-container" [zoom]="zoom" [latitude]="latitude" [longitude]="longitude">

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length === 2">
    <agm-polyline [strokeColor]="'red'" [editable]="true" (lineMouseUp)="coordinateChangeDetected($event)">
      <ng-container *ngFor="let point of shape.Points">
        <agm-polyline-point [latitude]="point.lat" [longitude]="point.lng">
        </agm-polyline-point>
      </ng-container>
    </agm-polyline>
  </span>

  <span *ngIf="!isObjectNullOrUndefined(shape) && !isObjectNullOrUndefined(shape.Points) && shape.Points.length > 2">
    <agm-polygon [paths]="shape.Points" [fillOpacity]="0.1" [strokeOpacity]="0.5" [fillColor]="'red'"
      [strokeWeight]="1" [visible]="true" [zIndex]="1" [editable]="true" (polyMouseUp)="coordinateChangeDetected($event)"></agm-polygon>
  </span>

</agm-map>