El problema que tengo es que el mapa no aparece en absoluto, hay un espacio en blanco donde debería estar el mapa. He seguido la guía de inicio rápido de Leaflet y todavía tengo que determinar por qué mi mapa no aparece.
A continuación se muestra el código que tengo hasta ahora:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <!-- Stylesheets --> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="mapid"> </div> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""> var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: 'mapbox.streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw' }).addTo(mymap); </script> </body> </html>Usted importa el archivo JavaScript del folleto y tiene el código de su página dentro de la misma etiqueta HTML <script> . En tal caso, se supone que los navegadores deben ignorar (no ejecutar) el contenido entre las etiquetas del script, es decir, el código de su página no se ejecuta.
Simplemente separe en 2 pares de etiquetas de script diferentes:
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script> var mymap = L.map('mapid').setView([51.505, -0.09], 13); // etc. </script>