Leaflet Map v1.7.1 标记正常显示但底图不加载问题求助

1 优先验证瓦片服务有效性 #

你当前使用的Mapbox瓦片服务需要有效访问凭证，代码中accessToken字段为占位符your.mapbox.access.token，会直接导致瓦片请求被拒绝，优先做验证测试：
替换为无需凭证的公开瓦片服务测试，示例代码如下：

var layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © OpenStreetMap contributors',
    maxZoom: 18
});

如果替换后底图正常显示，说明原问题为Mapbox凭证无效，申请官方有效AccessToken替换原有占位符即可。

2 请求异常排查 #

打开浏览器开发者工具的「网络」面板，过滤所有瓦片资源请求：

• 状态码为401：瓦片服务认证失败，确认访问凭证是否有效、权限是否匹配
• 状态码为404：瓦片地址模板错误，确认参数占位符、服务地址是否正确
• 跨域错误：瓦片服务存在跨域限制，更换支持跨域访问的瓦片服务即可

3 渲染配置排查 #

• 先检查HTML语法完整性，你提供的代码末尾</html缺少闭合符>，部分严格模式的浏览器会出现解析异常，补全即可
• 移除地图初始化时的preferCanvas: true配置项测试，部分版本Leaflet的Canvas渲染模式对瓦片渲染存在兼容问题
• 检查Leaflet CSS是否正确加载，确认.leaflet-tile元素的层级样式未被自定义样式覆盖，导致瓦片被容器背景遮挡
• 不同瓦片服务的tileSize、zoomOffset参数要求不同，参数不匹配会导致瓦片请求坐标错误，确认参数和所用瓦片服务要求一致

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