时间戳

首页 > 解决方案 > 添加附加点时，agm-polygon 不更新

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

问题描述

编辑：我为此添加了一个堆栈闪电战。这是我的第一个，所以我希望它有效。

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

几年来我一直在使用谷歌地图，最近将每一个都迁移到 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)
];

一切都按预期工作，因为它在美国的西南部分绘制了一个多边形。下一步是将其扩展一点，以便我可以单击地图并添加点。我在 mapClick 的 agm-map 元素上添加了一个处理程序：

(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 ) 上的示例，但这似乎非常复杂，并且试图用更少的代码来完成。这是唯一的方法还是我错过了什么？

标签： angulargoogle-mapsagm

解决方案

经过一些实验，我将问题缩小到在数组上使用 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

推荐阅读