按教程实现Leaflet地图加载仅显示空白 求问题排查

• Pug缩进语法错误
  你提供的layout.pug代码中head标签后子元素（meta、link、script等）没有正确缩进，Pug是严格缩进敏感的模板语言，错误缩进会导致Leaflet的CSS和JS资源实际没有被插入到页面<head>标签内，甚至不加载，直接导致地图初始化失效。请修正缩进：

doctype html
html
  head
    meta(charset='utf-8')
    meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
    meta(name='description' content='')
    meta(name='author' content='')
    title BiciRed - Portal Bici-amigo
    // Favicon
    link(rel='icon' type='image/x-icon' href='assets/favicon.ico')
    // Core theme CSS (includes Bootstrap)
    link(href='css/styles.css' rel='stylesheet')
    // Leaflet 资源
    link(rel='stylesheet' href='https://unpkg.com/leaflet@1.7.1/dist/leaflet.css' integrity='sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==' crossorigin='')
    script(src='https://unpkg.com/leaflet@1.7.1/dist/leaflet.js' integrity='sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==' crossorigin='')
  body
    block content

同时检查index.pug中#main_map节点的缩进是否正确，确保渲染后页面存在该ID的DOM节点。

• DOM加载时机问题
  即使脚本放在页面底部，仍有可能出现JS执行时DOM未完全渲染的情况，将maps.js的代码包裹在DOM加载完成事件中：

window.addEventListener('DOMContentLoaded', () => {
  var map = L.map("main_map").setView([6.1630788, -75.631681], 17);

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

  L.marker([6.1573243, -75.6324465]).addTo(map);

  L.marker([6.1573243, -75.6324485]).addTo(map);
})

（注：原代码中OpenStreetMap版权链接多写了一个w，已修正，不影响地图加载仅影响跳转）

• CSS优先级覆盖问题
  Bootstrap的默认样式或页面其他样式可能覆盖了#main_map的高度设置，打开浏览器开发者工具的元素面板，选中#main_map节点，查看最终生效的样式，确认height属性是否为400px。如果被覆盖，提高样式优先级即可：

.container #main_map {
  height: 400px !important;
  width: 100%;
}

• 瓦片资源加载/坐标问题

1. 打开开发者工具的网络面板，筛选img请求，查看OpenStreetMap的瓦片请求是否成功返回，部分地区无法正常访问OpenStreetMap服务会导致瓦片加载失败显示空白，可替换为本地/可用的瓦片服务测试。
2. 暂时将地图初始化参数修改为setView([39.9042, 116.4074], 10)，测试是否是坐标错误、缩放层级过高导致对应区域无瓦片资源的问题。

内容的提问来源于stack exchange，提问作者Mar