如何从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，实际上没有任何帮助，有一些内置函数可以返回点列表，但不幸的是它不是更改的坐标，而是旧坐标（原始坐标）。

---

寻找解决方法：

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

多边形编辑：

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

行编辑：

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

---

问题结束：

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

附加信息： 多边形文档 行文档

Answer 1

因此，我不得不解决这个问题，这是我目前的解决方案，只需实现简单的if语句并添加新发出的坐标，然后将它们插入到列表中的正确位置，最终看起来似乎并不重要。

我对这个问题的解决方案是这样的，每当我们从AGM Directive发出事件时，我们需要检测2个重要的东西，如果我们有'vertex'或'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>