Leaflet 带有OpenStreetMap平铺层地图问题的传单

我正在使用带有OpenStreetMap平铺层的传单，它在页面上正确显示地图，但若我在jQuery UI弹出窗口中显示地图，则地图不会正确显示。贴图平铺未正确对齐。但当我在F12打开控制台的情况下开始调试时，贴图得到了正确的渲染。我不知道怎么会这样

图片：

我的代码：

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");

}

document.getElementById（'mapdiv'）.innerHTML=“Recenter-Map”；
document.getElementById（'mapdiv'）.innerHTML=“”；
var mymap=“”；
var mymap=L.map（'map1'）.setView（[lat，lng]，13）；
var OpenStreetMap_Mapnik=L.tillelayer（'https://{s}.tile.OpenStreetMap.org/{z}/{x}/{y}.png'{
maxZoom:19，
属性：“©；”
}).addTo（mymap）；
var标记=L.标记（[lat，lng]）。添加到（mymap）；
marker.bindPopup（loc_地址）.openPopup（）；
$（'#显示地图'）。对话框（{
宽度：450，
身高：450，
莫代尔：是的，
可调整大小：正确，
dialogClass:“表单样式lg”，
关闭：函数（）{
}
}).prev（“.ui对话框标题栏”）.css（“颜色”，“#337ab7”）；
}

可能重复感谢，问题得到解决。