怎么确保在页面加载了Leaflet css 和js文件

为了确保在网页上正确加载Leaflet CSS和JS文件，你需要按照以下步骤操作：

1. **添加HTML引用**：
在你的HTML文档头部添加外部链接，引入Leaflet的CSS和JS库。通常建议先加载CSS，因为地图需要样式才能显示。

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

这里的`unpkg.com`是一个常用的CDN（内容分发网络），它会自动处理版本更新。

2. **使用async或defer属性**：
如果你想让JavaScript在页面其他资源加载完成后异步加载，可以添加`async`或`defer`属性到JS标签中，这有助于提高性能。

<script async defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

3. **错误处理**：
可以通过JavaScript检查资源是否已经成功加载，例如使用`window.onload`或现代浏览器提供的DOMContentLoaded事件。

window.addEventListener('DOMContentLoaded', function() {
  if (window.L) {
    // Leaflet已加载，可以开始初始化地图
  } else {
    console.error('Leaflet library not loaded.');
  }
});

4. **加载顺序**：
确保地图相关的脚本在DOM元素渲染后才运行，避免因DOM未加载而导致的地图无法显示。

遵循以上步骤，你应该能够保证在页面加载时正确地包含和使用Leaflet的CSS和JS文件。