我正在使用地图来跟踪我的房车旅行期间的停靠点。因此,地图正在渲染折线和标记。这是html。
<div style="min-height: 400px;">
<agm-map *ngIf="showMap" [latitude]="lat" [longitude]="lng" [fitBounds]="bounds"
[zoom]="zoom">
<agm-polyline [strokeColor]="'#2196f3'">
<ng-container *ngFor="let i of points">
<agm-polyline-point [latitude]="i.lat()" [longitude]="i.lng()"></agm-polyline-point>
</ng-container>
</agm-polyline>
<agm-marker *ngFor="let mark of markers"
[latitude]="mark.latitude"
[longitude]="mark.longitude"
[title]="mark.title"
[label]="mark.label"
[iconUrl]="mark.iconUrl">
</agm-marker>
</agm-map >
关于数据的组件没有什么花哨的。
markers: any[] = [];
points: any[] = [];
bounds: any;
showMap: boolean = true;
stopDistance: number = 300;
我有一个 setCenter 函数,我会在所有数据更新后调用它。我已经添加了几个标记来查看边界是否已正确更新。为简洁起见,我没有添加该代码。
setCenter() {
this.bounds = new google.maps.LatLngBounds();
this.points.forEach(m => this.bounds.extend(m));
this.lat = this.bounds.getCenter().lat();
this.lng = this.bounds.getCenter().lng();
this.zoom = 1;
预期结果:添加标记和 p 线然后设置边界后,我希望地图能够更新并居中。
结果:在我将鼠标移到地图上并有时单击它之前,地图不会更新或移动。这会导致立即更新,所以我假设它没有陷入缓慢的功能。我还查看了调试器中的性能选项卡,看看它是否卡在某个地方。
尝试的事情:使用和ngIf隐藏然后显示地图,最新版本具有手动设置lat和lng以及缩放。尝试了不同的浏览器。