Question

<div *ngFor="let job of jobBoard">
        <div style="height: 200px">
          <!-- <div #map id="map"></div> -->
          <div #map id="jobBoard.jobBoardId"></div>
        </div>
</div>

我正在试图弄清楚如何循环并继续添加地图。我有一张jobBoard卡，显示与工作相关的信息 - 类别，收入等。我想弄清楚的是如何遍历jobBoard并继续添加地图。

这里的另一个挑战是我每隔30秒为jobBoard获取数据，所以如果我一直在调用

this.map = new google.maps.Map(this.mapElement[mapId].nativeElement, mapOptions);

新google.maps然后地图闪烁。

这是stackblitz： https://stackblitz.com/edit/ionic-map-test

如果您在页面上停留约15秒，地图就会消失。

更新1：

使用trackby：

<div *ngFor="let job of jobBoard; trackBy: trackByFn">

地图出现在第一个项目上。但它仍然没有显示循环中的所有项目。

  public trackByFn(index, jobBoard): void {
    return jobBoard.jobBoardId;
  }

Answer 1

  <div *ngIf="jobBoard">
    <div *ngFor="let job of jobBoard; trackBy trackByFn">
      <div style="height: 200px">
        <div style="height: 100%;width: 100%;display: block;" id="{{'map'+job.jobBoardId}}"></div>
      </div>
    </div>
  </div>

然后在.ts一侧：

private loadMap(job: JobBoardInterface): void {
    console.log('loading map: ' + job.jobBoardId);
    var mapCanvas = document.getElementById('map' + job.jobBoardId);
    console.log("job.consumerGeo: ", job.consumerGeo);
    console.log("mapCanvas: ", mapCanvas);
    let lat: number = Number(job.consumerGeo.y);
    let lng: number = Number(job.consumerGeo.x);
    if (mapCanvas) {
      var Home_Map_Option = {
        center: { lat: lat, lng: lng }, // contractor's position
        zoom: 16,
        disableDefaultUI: true,
        mapTypeControl: false,
      }
      let map = new google.maps.Map(mapCanvas, Home_Map_Option);
      this.listOfAllMaps.push(map);
    }
  }

进一步：每隔几秒钟我就会收到来自服务器的轮询：

  if (!this.isMapAlreadyLoaded) {
    this.isMapAlreadyLoaded = true;            
    this.loadONeTimeMap(this.jobBoard);
  }

离子2 - * ng对谷歌地图消失

1 个答案: