Javascript 单张显示悬停地图-地图不'；负载不正确

我在一个div容器里有一张传单地图。默认情况下它不可见。 当我将鼠标悬停在按钮贴图上时，它将变为可见。问题是，容器中的地图分幅加载不正确。此外，当我放大地图时，它不会重新加载正确的平铺。似乎只有一个磁贴加载。 有人知道问题出在哪里吗？ 当我单独放置贴图（不是嵌套的div容器）并在默认情况下可见时，效果很好

var-map=L.map（'map'）；
var osm=L.tileLayer（'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'{
maxZoom:19，
属性：“©；，由提供”
});
var geojsonFeature=[{
“类型”：“功能”，
“财产”：{
“id”：“marker1”，
“名称”：“Coors字段”
},
“几何学”：{
“类型”：“点”，
“坐标”：[-104.99404，39.75621]
}
},{
“类型”：“功能”，
“财产”：{
“id”：“marker2”，
“名称”：“学校”，
},
“几何学”：{
“类型”：“点”，
“坐标”：[-104.69404，38.85621]
}
}];
var markersById={}；
var markerLayer=L.geoJson（空{
pointToLayer：功能（特性、latlng）{
返回L.marker（latlng，{}）；
},
onEachFeature:功能（功能，层信息）{
if（feature.properties）{
var content=“”+“Name”+feature.properties.Name+”；
layerinfo.bindPopup（内容、{
关闭按钮：真
});
//如果图层具有id，则将其保存到markersById中。
if（feature.properties.id）{
markersById[feature.properties.id]=layerinfo；
}
}
}
});
addData（geojsonFeature）；
markerLayer.addTo（map）；
map.setView（markersById[“marker1”].getLatLng（），16）；
map.addLayer（osm）
正文{
填充：0；
保证金：0；
}
#地图{
身高：100%；
}
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.mapContainer{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.mapContainer内容{
显示：无；
位置：绝对位置；
宽度：100%；
身高：100%；
}
.mapContainer:hover.mapContainer内容{
显示：块；
}
.mapContainer:hover.dropbtn{
背景色：#3e8e41；
}

地图
一旦地图容器显示，您必须使用

检查贴图容器大小是否更改，如果更改，则更新贴图-在动态更改贴图大小后调用它，默认情况下也会设置平移动画


var-map=L.map（'map'）；
var osm=L.tileLayer（'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'{
maxZoom:19，
属性：“©；，由提供”
});
var geojsonFeature=[{
“类型”：“功能”，
“财产”：{
“id”：“marker1”，
“名称”：“Coors字段”
},
“几何学”：{
“类型”：“点”，
“坐标”：[-104.99404，39.75621]
}
},{
“类型”：“功能”，
“财产”：{
“id”：“marker2”，
“名称”：“学校”，
},
“几何学”：{
“类型”：“点”，
“坐标”：[-104.69404，38.85621]
}
}];
var markersById={}；
var markerLayer=L.geoJson（空{
pointToLayer：功能（特性、latlng）{
返回L.marker（latlng，{}）；
},
onEachFeature:功能（功能，层信息）{
if（feature.properties）{
var content=“”+“Name”+feature.properties.Name+”；
layerinfo.bindPopup（内容、{
关闭按钮：真
});
//如果图层具有id，则将其保存到markersById中。
if（feature.properties.id）{
markersById[feature.properties.id]=layerinfo；
}
}
}
});
addData（geojsonFeature）；
markerLayer.addTo（map）；
map.setView（markersById[“marker1”].getLatLng（），16）；
map.addLayer（osm）；
document.getElementsByCassName（“mapContainer”）[0]。addEventListener（“鼠标悬停”，函数（）{
map.invalidateSize（）；
});
正文{
填充：0；
保证金：0；
}
#地图{
身高：100%；
}
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.mapContainer{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.mapContainer内容{
显示：无；
位置：绝对位置；
宽度：100%；
身高：100%；
}
.mapContainer:hover.mapContainer内容{
显示：块；
}
.mapContainer:hover.dropbtn{
背景色：#3e8e41；
}

地图