获取传单地图中未找到地图容器的错误

Question

我的要求是在页面上显示多个传单地图（基于后端数据）。

ma​​p.component.ts

for (var i = 0; i < this.mapleaf.length; i++) {
    map[i] = L.map(this.mapleaf[i]).setView([12.9249, 80.1000], 12); 
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map[i]);
}

ma​​p.component.html

<div class="col-xs-12 col-sm-8 col-lg-8" >
  <span *ngFor="let leaflet of mapleaf">      
    <div id ="{{mapleaf}}"></div>
  </span>   
</div>

我已将地图 ID 设置为 但是在执行时将错误显示为未找到地图容器。

我是这个传单地图的新手，谁能帮我解决这个问题。

Answer 1

我强烈建议通过与https://stackblitz.com/ 共享您的代码来重现错误，因为可能存在不止一个问题。

然而，乍一看似乎有问题的是：

<span *ngFor="let leaflet of mapleaf">      
    <div id ="{{mapleaf}}"></div>
</span> 

您遍历数组，但每次都绑定整个数组，而不是其中的每一项。因此，地图容器与您在 .ts 文件中指向的容器不匹配。

将其更改为以下内容：

<span *ngFor="let leaflet of mapleaf">      
    <div id ="{{leaflet}}"></div>
</span>