传单 - 平移后的灰色条纹

Question

编辑

这个问题不是的重复，原因很明显，你可以看到我的地图跨越 100% 的高度（比较我的属性图片在灰色区域，而另一个问题的容器显然在空白区域之前结束。我也可以在开发人员工具中确定我的容器的大小跨越父容器的 100%。看看我的 css 并仔细查看图片，如果您不知道它是如何工作的，也许可以查看传单。）

原版

我在 ionic 3 中使用 leaflet 1.5.1。

稍微平移地图后，通常不会加载灰色部分的内容（我的浏览器开发工具中没有显示网络 requests/traffic），我只剩下灰色 parts/stripes如图中的地图（下面的灰色水平条纹）。

当我进一步平移时，会加载缺失的地图部分，但有时不会（尤其是在 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')) 触发调整大小事件。

地图对此作出反应，将自身调整为 "new" 大小。

传单 - 平移后的灰色条纹

Leaflet - Gray stripes after panning

leaflet

ionic-framework

ionic3