Как получить новые координаты из Angular Google Maps? (Угловой 6)

Question

Справочная информация:

Привет всем, в последние дни я борюсь с API угловых карт Google (AGM). Я строю что-то довольно простое, у меня есть список координат (долгота и широта), которые я передаю директиве 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 или другие решения не работают, большое спасибо за чтение этого, и если у чего-то есть та же проблема, я буду счастлив если вы можете поделиться, как бы вы справились с этим.

Дополнительная информация: Документы по полигонам Line Docs

Answer 1

Итак, мне пришлось решить эту проблему, и это мое решение на данный момент, просто реализовать простое утверждение if и добавить новые излучаемые координаты и вставить их в мой список в правильной позиции, в конце концов, кажется, что это не имеет большого значения после все.

Мое решение этой проблемы таково: каждый раз, когда мы получаем событие emit из директивы AGM, нам нужно обнаружить 2 важные вещи, если мы получили «вершину» или «ребро», если мы получили вершина в нашем объекте, поэтому пользователь переместил некоторую существующую вершину, поэтому мы получим доступ к нашему списку координат и обновим координату.

Если мы получили ребро в нашем объекте, поэтому пользователь хочет добавить новую точку к фигуре, поэтому мы вставим новую точку в наш список по индексу (ребро + 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>