<div *ngFor="let job of jobBoard">
<div style="height: 200px">
<!-- <div #map id="map"></div> -->
<div #map id="jobBoard.jobBoardId"></div>
</div>
</div>
我正在尝试弄清楚如何循环并不断添加地图。我有一张工作板卡,显示与工作相关的信息 - 类别、收入等。我想弄清楚的是如何遍历 jobBoard 并不断向其添加地图。
这里的另一个挑战是我每 30 秒为 jobBoard 获取数据,所以如果我继续打电话
this.map = new google.maps.Map(this.mapElement[mapId].nativeElement, mapOptions);
新的谷歌地图然后地图闪烁。
这是堆栈闪电战: https://stackblitz.com/edit/ionic-map-test
如果在页面上停留约 15 秒,地图将消失。
更新 1:
通过使用跟踪:
<div *ngFor="let job of jobBoard; trackBy: trackByFn">
地图出现在第一项。但它仍然没有显示循环中的所有项目。
public trackByFn(index, jobBoard): void {
return jobBoard.jobBoardId;
}
<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);
}