带有OpenStreetMap瓷砖图层地图问题的传单

Question

我正在使用带有OpenStreetMap切片图层的传单，它在页面上正确显示了地图，但是如果我在jQuery UI中弹出显示地图，则地图无法正确显示。地图图块未正确对齐。但是，当我在F12打开控制台的情况下开始调试时，将正确渲染地图。我不知道怎么回事。

图片： https://drive.google.com/file/d/1THxx6mgSVg_9ckpyPiBmz8Fxi5nX2l3P/view?usp=sharing

https://drive.google.com/file/d/1JqQte7O8ZiqcoJ92otEMMVFSPN0n71jU/view?usp=sharing

我的代码：

document.getElementById('mapdiv').innerHTML = "<button type='button' onclick='recenterMap("+lat+","+lng+")'>Recenter Map</button>";
    document.getElementById('mapdiv').innerHTML = "<div id='map1' style='width: 100%; height: 100%;'></div>";
    var mymap = "";
    var mymap = L.map('map1').setView([lat, lng], 13);

    var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(mymap);

    var marker = L.marker([lat, lng]).addTo(mymap);
    marker.bindPopup(loc_address).openPopup();

$('#show_map').dialog({   
    width: 450,
    height: 450,
    modal: true,
    resizable: true,
    dialogClass: 'form-style-lg',
    close : function() {

        }
    }).prev(".ui-dialog-titlebar").css("color","#337ab7");

}