添加附加点时 agm-polygon 不更新

Question

编辑：我为此添加了一个 stackblitz。这是我的第一次，所以我希望它有效。

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

几年来我一直在使用 google 地图，最近将每个地图都迁移到了 AgmMaps。最近看到几个关于在地图上绘制多边形的问题，想做一个很简单的demo。我将其添加到工作地图项目中：

<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 无济于事。文档似乎非常清楚，您可以在路径部分中说明："Inserting or removing LatLngs from the Array will automatically update the polygon on the map."

我查看了 StackBlitz (https://stackblitz.com/edit/agm-polygon?file=app%2Fapp.component.html) 上的示例，但这看起来真的很复杂，并且试图用更少的代码来完成。这是唯一的方法还是我遗漏了什么？

Answer 1

经过一些实验，我将问题缩小到在数组上使用 push 函数。我希望我能解释为什么使用 push 是个问题，但改用传播运算符将项目添加到数组可以解决这个问题。

我将 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

添加附加点时 agm-polygon 不更新

agm-polygon not updating when additional points are added

google-maps

angular

agm