angular - Angular Google Maps 航路点不与动态航路点数组一起显示

Question

我正在尝试在 Angular Google Maps 中的起点和终点地址之间获取航点。我有一个数组
waypoints: any
和一个动态添加航点的方法：
addWaypoint($event) { this.waypoints.push({ location: { lat: $event.geoLocation.latitude, lng: $event.geoLocation.longitude}, stopover: true }); console.log(this.waypoints); }

但这些航点不会显示在地图上。

 <agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false" [zoom]="zoom">
                <agm-marker *ngIf="!destination" [latitude]="lat" [longitude]="lng"></agm-marker>
                <agm-direction *ngIf="destination" [origin]="origin" [destination]="destination" [waypoints]="waypoints">
                </agm-direction>
 </agm-map>

如果我将航点静态添加到数组中，它们将显示：

addWaypoint($event) {
    this.waypoints = [{
        location: { lat: $event.geoLocation.latitude, lng: $event.geoLocation.longitude},
        stopover: true
    }];
    console.log(this.waypoints);
}

控制台输出在两种情况下都是相同的：

有什么建议么？谢谢

标签： angulartypescriptgoogle-maps

Answer 1

通过使用扩展运算符找到了解决方案：

this.waypoints = [...this.waypoints, ...[{
        location: { lat: $event.geoLocation.latitude, lng: $event.geoLocation.longitude},
        stopover: true
    }]];