传单-平移后呈灰色条纹

Question

编辑

该问题不是How to get a leaflet map canvas to have a 100% height?的重复，因为明显的原因，您可以看到我的地图跨越了100％的高度（比较图片上的属性为灰色区域，而另一个问题的容器显然在空白区域之前结束。另外，我可以在开发人员工具中确定容器的大小，该大小跨越父容器的100％。只需看一下我的CSS和看看图片，如果您不知道它的工作原理，也可以看看传单。）

原始

我在离子3中使用传单1.5.1。

稍微平移地图后，通常不加载灰色部分的内容（在我的浏览器开发工具中没有网络请求/流量指示），并且在地图中我留下灰色部分/条纹（如图所示）（下面的灰色水平条纹）。

当我进一步平移时，会加载缺少的地图部件，但有时不会加载（尤其是在iOS中）。

使用我的地图组件（如下）的我的地图页面的HTML

<map style="height: 100%; width: 100%;">

地图组件的HTML

<div id='map'></div>

组件的 scss 文件

map {
    #map{
        height:100%;
        width: 100%;
    }
}

这里是组件的打字稿，它创建了地图

this.map = L.map('map', {
      center: L.LatLng(center.latitude, center.longitude),
      zoom: 13,
      attribution: Attribution,
      tap: false
    });


    //Add OSM Layer
    L.tileLayer("https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png", { attribution: Attribution }).addTo(this.map);

    this.map.setView([center.latitude, center.longitude], 14);

关于我在做什么错的任何提示吗？

Answer 1

解决方案是每次用户进入包含所有选项卡（包括地图选项卡）的选项卡页面时，通过window.dispatchEvent(new Event('resize'))触发大小调整事件。

地图对此做出了反应，将自身调整为“新”大小。