Leaflet地图加载完成前如何显示Loading加载提示文字

核心逻辑是在地图容器上层放置固定层级的加载提示层，等待所有地图资源、业务逻辑执行完成后再隐藏提示层，具体实现如下：

1. 基础结构编写 #

首先在地图容器内部放置加载提示元素，保证它的层级高于Leaflet默认渲染的所有地图元素，默认状态下显示：

<div id="map" style="height: 100vh; width: 100%; position: relative;">
  <!-- 加载提示层 -->
  <div id="map-loading" style="
    position: absolute;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 1000;
  ">
    <strong>Loading...</strong>
  </div>
</div>

注意：地图容器必须设置position: relative，否则加载层的绝对定位会偏移到页面其他位置。

2. 加载完成判断逻辑 #

不要只监听地图本身的加载事件，需要同时覆盖两类加载任务：底图瓦片渲染完成、geolocation定位+周边点位请求渲染完成，两类任务全部执行完毕再关闭加载提示，避免出现提示消失但地图内容还没渲染完的问题。
参考实现代码：

const map = L.map('map')
const loadingMask = document.getElementById('map-loading')
// 用状态标记两个加载任务的完成情况
const loadState = {
  tileReady: false,
  poiReady: false
}

// 统一检查加载状态，全部完成则隐藏提示
const hideLoadingWhenReady = () => {
  if (loadState.tileReady && loadState.poiReady) {
    loadingMask.style.display = 'none'
    // 需要淡入淡出效果的话，这里可以替换为添加CSS类实现过渡动画
  }
}

// 监听底图瓦片加载完成
L.tileLayer('你的底图瓦片地址', {
  attribution: '你的底图版权信息'
}).addTo(map)
.on('load', () => {
  loadState.tileReady = true
  hideLoadingWhenReady()
})

// 处理定位和周边点位加载逻辑
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(async (position) => {
    const { latitude: lat, longitude: lng } = position.coords
    map.setView([lat, lng], 15)
    // 替换为你自己的周边点位请求逻辑
    const nearbyPois = await fetchNearbyPointList(lat, lng)
    // 点位渲染到地图
    L.geoJSON(nearbyPois).addTo(map)
    // 标记点位加载完成
    loadState.poiReady = true
    hideLoadingWhenReady()
  }, async (error) => {
    // 定位失败兜底逻辑：使用默认城市位置加载点位
    console.warn('定位失败，使用默认位置', error)
    map.setView([39.9042, 116.4074], 13)
    const defaultPois = await fetchNearbyPointList(39.9042, 116.4074)
    L.geoJSON(defaultPois).addTo(map)
    loadState.poiReady = true
    hideLoadingWhenReady()
  })
} else {
  // 浏览器不支持定位的兜底逻辑
  map.setView([39.9042, 116.4074], 13)
  const defaultPois = await fetchNearbyPointList(39.9042, 116.4074)
  L.geoJSON(defaultPois).addTo(map)
  loadState.poiReady = true
  hideLoadingWhenReady()
}

3. 常见踩坑点 #

• 不要直接用Leaflet的map.on('load')事件作为关闭加载的触发条件：这个事件仅代表地图实例初始化完成、初始视口计算完毕，不代表瓦片、自定义点位已经渲染完成。
• 加载层的z-index不要低于900：Leaflet默认的弹窗、控件层级最高到800，设为1000可以保证加载层始终在最顶部。
• 如果使用了点聚合、热力图等第三方渲染插件，要等插件对应的渲染完成事件触发后，再标记poiReady为true，避免提示关闭后插件图层还在加载。
• 所有异常分支（定位失败、接口请求失败、浏览器不支持定位）都要修改poiReady状态，否则加载层会永远显示不消失。

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