在 Angular 中加载谷歌地图，第一次不加载

Question

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

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

我尝试使用 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，见docs

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 首先创建了“divs”和“after the Breath”，并填充了地图。你可以看到一个 setTimeout() 就像你对 Angular 说的那样：“嘿，伙计！首先重绘应用程序，重绘后，记住另一个动作”