Question

我有一个所有弹出式面板的结构（不能改变它，因为它是一个必需的功能）其中一个是map div但是父母是固定位置而map div无法感知如何设置在一个固定的父div上我为此做了一个小提琴：

它有一个map show按钮但是在点击之前请将结果面板向上拖动以查看确切的问题然后点击按钮

如果你看到地图div存在但是主地图坐标未设置为中心并且也向左和向上漂移

所以现在一个小拖动结果面板（小提琴面板）并且你看到地图将是正确的
我该如何解决这个问题呢？

的CSS：

#popup{
position: fixed;
z-index: 9998;
background-color: rgba(0,0,0,.3);
height: 100vh;
width: 100vw;
display: none;
overflow: auto;
}
#parent{
background-color: #00ff26;
position: fixed;
z-index: 9999;
padding: 5px;
display: none;
border-radius: 10px;
}
#parent *{
padding: 2px;
border-radius: 5px;
display: block;
margin-bottom: 5px;
}
#map{
    height: 320px;
    width: 320px;
}

HTML：

<div id="popup">
<div id="parent">
 <!--this map is in two fixed div parent that not work-->
<div id="map"></div>
</div>
</div>
<input type="submit" value="show map" id="mapbt">
<!--this map is worked please uncomment it by ctrl + / and comment upper #map -->

<!-- <div id="map"></div> -->

JS：

function mapper(mapID) {
centerPoint =  [51.5, -0.09];
zoom = 16;
var map = L.map(mapID, {
    center: centerPoint,
    maxZoom: 22,
    zoom: zoom,
    zoomControl: true,
    attributionControl: true,
    doubleClickZoom: false
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OSM</a> contributors'}).addTo(map);
    L.marker(centerPoint, {draggable: true}).addTo(map);
}

function setPopup(panel, parentModal) {
parentModal.css("display", "inline-block");
this.close = function close() {
    panel.css("display", "none");
    parentModal.unbind("click").css("display", "none");
}

parentModal.click(close);
panel.submit(close);

var w1 = panel.outerWidth() / 2,
h1 = panel.outerHeight() / 2,
w2="50vw",
h2 = "50vh";

panel.css({"display": "inline-block", "top": "calc(" + h2 + " - " + h1 + "px)", "left": "calc(" + w2 + " - " + w1 + "px)"});
}
$("#mapbt").click(function(){
 setPopup($("#parent"), $("#popup"));
})
mapper("map");

Answer 1

显示弹出窗口并加载/渲染地图元素后，您需要调用map.invalidateSize();。

https://jsfiddle.net/hpfe07yy/1/

修复有两个固定位置父级的leafletjs map div

1 个答案: