1
我有一個div容器內的單張地圖。它默認情況下不可見。 當我將鼠標懸停按鈕地圖變得可見。問題是，容器內的地圖瓦片沒有正確加載。此外，當我在地圖上放大它不會重新加載瓷磚正確。這似乎只有一個瓷磚加載。 有任何人的想法可能是什麼問題呢？ 當我把地圖分別（沒有嵌套DIV容器）和可見默認它工作正常。單張顯示地圖 - 地圖不正確加載
var map = L.map('map');
var osm = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
\t maxZoom: 19,
\t attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tiles courtesy of <a href="http://hot.openstreetmap.org/" target="_blank">Humanitarian OpenStreetMap Team</a>'
});
var geojsonFeature = [{
"type": "Feature",
"properties": {
\t \t "id": "marker1",
"name": "Coors Field"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
},{
"type": "Feature",
"properties": {
\t \t "id": "marker2",
"name": "School",
},
"geometry": {
"type": "Point",
"coordinates": [-104.69404, 38.85621]
}
}];
var markersById = {};
var markerLayer = L.geoJson(null, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {});
},
onEachFeature: function(feature, layerinfo) {
if (feature.properties) {
var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.name + "<table>";
layerinfo.bindPopup(content, {
closeButton: true
});
// Save the layer into markersById if it has an id.
if (feature.properties.id) {
markersById[feature.properties.id] = layerinfo;
}
}
}
});
markerLayer.addData(geojsonFeature);
markerLayer.addTo(map);
map.setView(markersById["marker1"].getLatLng(), 16);
map.addLayer(osm);body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.mapContainer {
position: absolute;
width: 100%;
height: 100%;
}
.mapContainer-content {
display: none;
position: absolute;
width: 100%;
height: 100%;
}
.mapContainer:hover .mapContainer-content {
display: block;
}
.mapContainer:hover .dropbtn {
background-color: #3e8e41;
}<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" rel="stylesheet"/>
<body>
<div class="mapContainer">
<button class="dropbtn">Map</button>
<div class="mapContainer-content">
<div id="map"></div>
</div>
</div>
</body>