我在 div 容器中有一张传单 map 。默认情况下不可见。 当我悬停 Button Map 时，它会变得可见。问题是，容器内的 map 图 block 加载不正确。此外，当我放大 map 时，它不会正确地重新加载图 block 。似乎只加载了一个图 block 。 有谁知道可能是什么问题？ 当我单独放置 map (不是嵌套的 div 容器)并且在默认情况下可见时，它工作正常。
var map = L.map('map');
var osm = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
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": {
"id": "marker1",
"name": "Coors Field"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
},{
"type": "Feature",
"properties": {
"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>最佳答案
你必须使用 map.invalidateSize()显示您的 map 容器后。
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
var map = L.map('map');
var osm = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
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": {
"id": "marker1",
"name": "Coors Field"
},
"geometry": {
"type": "Point",
"coordinates": [-104.99404, 39.75621]
}
},{
"type": "Feature",
"properties": {
"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);
document.getElementsByClassName("mapContainer")[0].addEventListener("mouseover", function () {
map.invalidateSize();
});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>注意:如有必要，您可以将 map.invalidateSize() 包裹在超时中，让浏览器有时间通过 CSS :hover 重新布局，然后再调用 invalidateSize 以便它读取正确的容器尺寸。
关于javascript - 传单在悬停时显示 map - map 加载不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35796654/