1

我正在使用地图来跟踪我的房车旅行期间的停靠点。因此,地图正在渲染折线和标记。这是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以及缩放。尝试了不同的浏览器。

4

0 回答 0