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

问题描述

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

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 放置为 但是在执行时显示错误为未找到地图容器。

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

解决方法

我强烈建议通过与 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>