离子5单张-地图容器找不到
离子5单张-地图容器找不到
提问于 2022-10-26 18:53:40
我正在尝试将传单地图集成到我的应用程序中。
我在我的.ts文件中编写了以下代码：
ionViewDidEnter() {
this.leafletMap();
}
leafletMap() {
this.map = Leaflet.map('map').setView([49.992863, 8.247253], 5);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© XY',
}).addTo(this.map);
}在模板文件中，我添加了div容器：<div id="map" style="width: 100%; height: 200px">
当我运行的时候，一切都很好。但是现在我想添加一些带有数据的标记，这些数据是从api加载的。因此，我必须修改代码，以便在加载数据后添加映射(和标记)。因此，我的新代码如下：
ionViewDidEnter() {
this.dataService.getLocation(this.locationID).then(data => {
this.location = data;
this.leafletMap();
});
}因此，现在我正在接收位置数据，但我也收到了一个错误消息：错误: Uncaught (承诺)：Error: Map容器未找到。
我在这里尝试过和其他问题不同的东西，但都没有用。你有什么主意，我怎么能解决这个问题？
回答 1
Stack Overflow用户
发布于 2022-11-03 13:56:55
你能试试这个吗？
leafletMap() {
setTimeout( () => {
this.map = Leaflet.map('map').setView([49.992863, 8.247253], 5);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© XY',
}).addTo(this.map);
}, 2000);
}我对这里的地图也有同样的问题。这是为我工作的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74212891
复制相关文章
相似问题
腾讯云开发者
