Soy nuevo en JavaScript. El folleto en la página no muestra el mapa hasta que cambio la propiedad .leaflet-container { overflow: ;}, puedes verlo en la imagen 2. ¿Cómo puedo arreglar esto? ¡Gracias! 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">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'} ).addTo(map); </script>Reemplazar var map = L.map.invalidateSize(); con
var map = L.map('map', { center: [51.505, -0.09], zoom: 13 }); Si aún no funciona, verifique si sobrescribe div en algunas de sus clases de CSS. De lo contrario, cree una muestra en https://leafletjs.com/edit