agm-polygon не обновляется при добавлении дополнительных точек - PullRequest
Новая
       34

agm-polygon не обновляется при добавлении дополнительных точек

0 голосов
/ 03 февраля 2020

Редактировать: я добавил стек для этого. Это мой первый, так что я надеюсь, что это сработает.

https://stackblitz.com/edit/angular-dlabgk

Я использую карты Google в течение нескольких лет и недавно перенес все в AgmMaps. Недавно я увидел несколько вопросов о рисовании полигонов на карте и хотел создать очень простую демонстрацию. Я добавил это в рабочий проект карты: 

<agm-polygon [strokeColor]="'red'" [strokeWeight]="4" [paths]="polygonPts">
</agm-polygon>

Объявил мой массив следующим образом: 

polygonPts: Array<google.maps.LatLng>[] = [];

Затем в своей функции mapReady я добавил несколько допустимых точек: 

this.polygonPts = [
    new google.maps.LatLng(34.85052636946416, -117.40498588867183),
    new google.maps.LatLng(36.28034702299417,-112.48311088867183),
    new google.maps.LatLng(39.87662851819041, -114.76826713867183),
    new google.maps.LatLng(38.03141086161898,-121.18428276367183)
];

Все сработало, как и ожидалось, поскольку нарисовал многоугольник в юго-восточной части США. Следующим шагом было немного его расширить, чтобы я мог нажимать на карту и добавлять точки. Я добавил обработчик в элемент agm-map для mapClick: 

(mapClick)="mapClick($event)"

, а затем добавил точки в массив: 

mapClick(e) {
    let latlng = new google.maps.LatLng(e.coords.lat, e.coords.lng);
    this.polygonPts.push(latlng);
    this.ptsString = JSON.stringify(this.polygonPts);
}

Я добавил ptsString в шаблон, чтобы я мог визуально вижу, что мой массив растет, но не может заставить карту обновиться. Я проверил NgZone, чтобы убедиться, что я нахожусь в зоне, а также пробовал this.zone.run безрезультатно. Документы кажутся очень ясными, что вы можете сделать это, заявив в разделе путей: «Вставка или удаление LatLngs из массива автоматически обновит многоугольник на карте».

Я рассмотрел пример на StackBlitz (https://stackblitz.com/edit/agm-polygon?file=app%2Fapp.component.html) но это казалось действительно сложным и пыталось сделать это с гораздо меньшим количеством кода. Это единственный способ или я что-то упустил?

1 Ответ

0 голосов
/ 07 февраля 2020

После некоторых экспериментов я сузил проблему до использования функции pu sh в массиве. Я могу объяснить, почему использование pu sh было проблемой, но переход на оператор распространения для добавления элементов в массив помог решить проблему.

Я обновил функцию mapClick () следующим образом: 

let ll = new google.maps.LatLng(event.coords.lat, event.coords.lng);
this.polygonPts = [...this.polygonPts, ll];
this.ptsList = JSON.stringify(this.polygonPts);

Я также обновил stackbltiz: https://stackblitz.com/edit/angular-dlabgk

...