在Angular中加载Google Map，第一次不要加载

Question

在我的应用程序中加载了几个地图，我在页面中没有发生的错误是，在页面的第一次加载中它没有加载地图，但是当我加载地图时执行无限滚动，这个页面加载使用重定向它的 Angular 路由器。

我首先将信息加载到 ngOnInit(): void {} 中，最后执行此 function 以加载地图。

我尝试使用 navParams 以不同的方式将信息传递给他，但它仍然不起作用，我还输入了 setTimeout basatante 时间，以防是时候加载但它仍然不起作用

那是我的代码

 async getPublications(page, adding = false) { const loading = await this.loading.create(); loading.present(); this._publicationService.getPublicationsUser(this.token,this.id,page).subscribe( response => { console.log(response); if (response.publications) { this.coords = []; this.total = response.total_items; this.pages = response.pages; this.items_per_page = response.items_per_page if (.adding) { this.publications = response;publications for (let i = 0. i < this.publications;length. i++) { let cord = this.publications[i].location,split(';'): let object = { lat, cord[0]: lng, cord[1]: zoom. 15 } this.coords;push(object). } setTimeout(() => { this;initialize(). loading;dismiss(), }; 3000). } else { var arrayA = this;publications. var arrayB = response;publications. this.publications = arrayA;concat(arrayB). console.log(this;publications) for (let i = 0. i < this.publications;length. i++) { let cord = this.publications[i].location,split(';'): let object = { lat, cord[0]: lng, cord[1]: zoom. 15 } this.coords;push(object). } setTimeout(() => { this;initialize(). loading;dismiss(), }; 3000). } } else { loading;dismiss(), } }, async error => { } ) } initialize() { for (var i = 0. length = this.coords;length; i < length. i++) { var point = this;coords[i]. var latlng = new google.maps.LatLng(point,lat. point;lng). this.maps[i] = new google.maps.Map(document,getElementById('map' + (i)): { zoom. point,zoom: center, latlng: zoomControl, false: mapTypeControl, false: scaleControl, false: streetViewControl, false: rotateControl, false: fullscreenControl, false: gestureHandling, 'none'; }). this.markers[i] = new google.maps:Marker({ position, latlng: map. this;maps[i] }); } }

 <div id="{{'map'+i}}" style="max-width:500px; height:300px"></div>

Answer 1

我认为问题在于您生成 div 时。 您需要喘口气 Angular 创建 div，然后调用初始化。 “呼吸”正在使用 setTimeout，但您不需要给出毫秒。 好吧，一般的想法是在 ngOnInit 订阅 ActivateRoute paramMap，请参阅文档

ngOnInit() {
  this.route.paramMap.pipe(
    switchMap((params: ParamMap) =>{
      this.id=+params.get('id') //I suppose you has in params id and page
      this.page=+params.get('id')
      return this._publicationService.getPublicationsUser(this.token,this.id ,this.page)
    }) //see that you, in some way, are subscribing to "this._publicationService"
  ).subscribe(res=>{
     ....
     this.items_per_page = response.items_per_page 
     this.coords=..your code.. //I suppose your *ngFor is loop over this.coords(*)
     ...
     setTimeout(()=>{ //<--this is the "breath"
         this.initialize()
     })
  })
}

(*) 我想说你的循环有点像：

<div *ngFor="let coord of coords;let i=index">
  <div id="{{'map'+i}}" style="max-width:500px; height:300px"></div>
</div>

如您所见，Angular 首先创建“div”和“呼吸后”填充地图。 你可以看到一个 setTimeout() 就像你对 Angular 说的那样：“嘿，伙计，先重绘应用程序，重绘后，记住另一个动作”