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

Question

背景：

大家好，在最近的日子里，我一直在努力使用谷歌角度地图（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，实际上没有任何帮助，有一些内置函数可以返回点列表，但不幸的是它不是更改的坐标，而是旧坐标（原始坐标）。

---

搜索解决方案的方式：

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

多边形编辑：

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

行编辑：

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

---

问题结束：

我也用Google搜索了一个解决方案，没有任何帮助，某些解决方案适用于angularJS或其他解决方案不起作用，非常感谢您阅读本文，如果有任何相同的问题，我会很高兴如果您可以分享自己的处理方式。

其他信息： Polygon Docs Line Docs

Answer 1

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

我对这个问题的解决方案是这样的，每当我们从AGM指令中获取事件发出时，我们就需要检测2个重要的东西，如果是'vertex'或'edge'，如果是 vertex exist 顶点，因此我们将访问坐标列表并更新坐标。

如果我们在对象中获得了边，则用户想要向形状添加新点，因此我们将新点插入列表中的索引（边+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
}

---

这是解决此问题的代码。

TypeScript：

  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>