leaflet - 带有 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");

}

标签： leafletopenstreetmap