使用Leaflet.js在网站不同页面展示独立地图时第二张地图无法显示

按照开发场景中初学者最易踩坑的顺序逐一排查，即可定位解决问题：

• DOM初始化时序错位
  全局引入公共maps.js时，如果地图初始化代码在DOM节点渲染完成前执行，会因找不到对应id的地图容器直接抛出错误、中断后续逻辑。同页面测试时由于脚本和DOM节点的引入顺序刚好匹配，不会暴露问题；拆分到独立页面后如果公共脚本在<head>中无延迟加载，就会提前执行初始化逻辑。
  解决方式：将所有地图初始化逻辑绑定在DOMContentLoaded事件回调中，确保DOM节点完全渲染后再执行地图实例创建。
• 无差别全局执行所有地图初始化逻辑
  这是该场景下最常见的报错原因：如果maps.js中没有做容器存在性判断，会逐行执行所有地图的初始化代码。打开页面B时，代码会先尝试初始化页面A专属的地图实例，由于页面B不存在对应DOM节点，抛出的错误会直接中断后续所有代码执行，导致页面B本来要加载的地图完全没有机会初始化。而同页面测试时由于两个地图容器都存在，不会触发报错。
  解决方式：为每段地图初始化逻辑前置DOM节点存在性判断，只有当对应容器存在时才执行初始化：

  document.addEventListener('DOMContentLoaded', function() {
    // 页面A专属地图逻辑
    const map1Dom = document.getElementById('map-container-a')
    if (map1Dom) {
      const map1 = L.map(map1Dom).setView([30.5, 104.1], 10)
      L.tileLayer('对应瓦片服务地址').addTo(map1)
      // 地图1的其他业务逻辑
    }
  
    // 页面B专属地图逻辑
    const map2Dom = document.getElementById('map-container-b')
    if (map2Dom) {
      const map2 = L.map(map2Dom).setView([39.9, 116.4], 10)
      L.tileLayer('对应瓦片服务地址').addTo(map2)
      // 地图2的其他业务逻辑
    }
  })
  

• 地图容器样式缺失
  如果给地图容器设置的高度样式写在了页面A的专属样式表中，页面B没有引入对应样式，会导致容器高度为0，哪怕地图实例初始化成功，也会因为没有可视区域完全不显示。
  解决方式：给地图容器设置全局生效的明确高度值，不要依赖内容自动撑开容器尺寸。
• 全局实例冲突残留
  同页面测试时如果在全局作用域定义了多个地图实例，拆分后如果没有清理重复初始化逻辑，会因Leaflet的单实例绑定规则冲突，导致新创建的地图无法正常渲染。排查时打开浏览器控制台查看对应报错信息，即可快速定位是哪一类冲突。

操作提示：修改完代码后强制刷新页面清除缓存，避免旧的JS缓存干扰加载逻辑。

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