传单在悬停时显示地图 - 地图加载不正确

Question

我在 div 容器中有一张传单地图。默认情况下不可见。当我悬停 Button Map 时，它会变得可见。问题是，容器内的地图图块加载不正确。此外，当我放大地图时，它不会正确地重新加载图块。似乎只加载了一个图块。有谁知道可能是什么问题？当我单独放置地图（不是嵌套 div-容器）并且在默认情况下可见时它工作正常。

var map = L.map('map');
var osm = L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
 maxZoom: 19,
 attribution: '&copy; <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>

Answer 1

一旦您的地图容器显示出来，您必须使用 map.invalidateSize()。

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: '&copy; <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 以便它读取正确的容器尺寸。

传单在悬停时显示地图 - 地图加载不正确

Leaflet show map on hover - map doesn't load correct

html

javascript

css

hover

leaflet