未显示该传单

Question

我是JavaScript的新手。页面上的leaflet不会显示地图，直到我更改了.leaflet-container属性{ overflow：;}，您才能在image2中看到它。我怎么才能解决这个问题呢？谢谢！CSS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"  />
<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }

HTML

<div id="map"></div>

JS

</body>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map.invalidateSize();
        L.tileLayer(
            'https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key=ekfefkerdkdfk2', 
            {attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'}
        ).addTo(map);
    </script>

​

​

Answer 1

将var map = L.map.invalidateSize();替换为

var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13
});

如果仍然不能工作，请检查是否在某些CSS类中重写了div。否则在https://leafletjs.com/edit上创建一个示例