自定义经纬度的Leaflet地图无法渲染问题求助

我正在使用Where the ISS at API获取国际空间站（ISS）的当前经纬度值，服务端请求代码如下：

app.get("/coordinates", async (req,res) =>{
    try{
    const result = await axios.get(API_URL);
    const latitude = result.data.latitude;
    const longitude = result.data.longitude;
    res.render("index.ejs", ({latitude: latitude, longitude: longitude}))
    } catch (error) {
        res.status(404).send(error.message);
        
    }
})

我的EJS模板代码如下：

<!-- leaflet css  -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

</head>

<body>
    <div id="map"></div>
    <p >ISS Latitude: <span id="data-latitude"><%= latitude %></span> </p>
    <p >ISS Longitude: <span id="data-longitude"> <%= longitude %></span></p>

    <!-- leaflet js  -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <!-- Your custom JavaScript file -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="/js/main.js"></script>
</body>

</html>

客户端JavaScript代码如下：

const mapElement = document.getElementById('map');
const latitude = parseFloat(document.getElementById("data-latitude").textContent);
const longitude = parseFloat(document.getElementById("data-longitude").textContent);

// Map initialization with predetermined coordinates
var map = L.map(mapElement).setView([latitude, longitude], 8);

// osm layer
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
osm.addTo(map);

// Marker at predetermined coordinates
var marker = L.marker([latitude, longitude]).addTo(map);

在本地主机加载该路由时，坐标能正常显示，但Leaflet地图始终无法渲染，请求帮忙排查问题原因。

• 地图容器缺少宽高样式（最常见原因）
  Leaflet地图需要渲染在有明确尺寸的容器内，默认情况下<div id="map"></div>的高度为0，所以看不到地图。你需要给这个容器添加CSS样式：

#map {
  height: 400px; /* 设置合适的高度，比如400px */
  width: 100%; /* 宽度可以设为100%或者固定值 */
}

可以把这段样式放在EJS模板的<head>标签内的<style>标签里，或者引入外部CSS文件。

• 验证坐标有效性
  虽然坐标能显示，但可以确认一下latitude和longitude是否是合法的数值（纬度范围是-90到90，经度范围是-180到180）。可以在main.js里添加console.log(latitude, longitude)来查看控制台输出的数值是否正常。

• 确认脚本加载顺序
  你的脚本加载顺序没问题：先加载Leaflet的CSS，再加载Leaflet的JS，最后加载自定义的main.js，这个顺序是Leaflet初始化的正确顺序，无需调整。

内容的提问来源于stack exchange，提问作者Shahmir Khan Niazi