Question

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

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

显示地图容器后，您必须使用map.invalidateSize()。

检查地图容器大小是否更改并更新地图（如果是这样） - 在您动态更改地图大小后调用它，默认情况下也为动画设置动画。

＆＃13;

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();
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

注意：如果有必要，你可以将map.invalidateSize()包装在一个超时时间，让浏览器通过CSS重新布局一段时间：hover，然后调用invalidateSize以便它读取正确的容器尺寸。

小册子在悬停时显示地图 - 地图加载不正确

1 个答案: