如何解决获取在传单地图中找不到地图容器的错误
我的要求是在页面上显示多个传单地图(基于后端数据)。
map.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]);
}
map.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。