使用HTML5结合Leaflet库可快速创建交互式地图。首先引入Leaflet的CSS和JS文件，接着在HTML中创建一个具有固定宽高的div作为地图容器，然后通过JavaScript初始化地图并设置中心坐标与缩放级别，添加OpenStreetMap底图；随后可添加标记、绑定弹窗信息，并监听点击事件实现交互，支持动态添加标记和响应用户操作，兼容性强且易于扩展GeoJSON、自定义图标等功能。
使用HTML5和Leaflet库可以轻松创建交互式地图。HTML5本身不直接提供地图功能，但通过结合JavaScript和第三方地图库如Leaflet，能实现强大的地图交互效果。下面介绍如何整合HTML5与Leaflet来制作一个基础的交互式地图。
引入Leaflet库
Leaflet是一个轻量、开源的JavaScript库，专为移动设备优化，适合在网页中嵌入地图。要在HTML5页面中使用它，首先需要在head标签中引入Leaflet的CSS和JS文件。
示例代码：
<font face="Courier New"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> </font>
创建地图容器
在HTML中添加一个div元素作为地图的显示区域，并设置固定宽度和高度。同时建议加上样式防止默认缩放问题。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<font face="Courier New"> <div id="map" style="height: 400px; width: 100%;"></div> </font>
初始化地图
使用JavaScript在页面加载后初始化地图，设置中心坐标、缩放级别，并添加一个底图图层（例如OpenStreetMap）。
示例代码：
<font face="Courier New">
<script>
let map = L.map('map').setView([39.90, 116.40], 12); // 北京为中心，缩放级别12
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</font>
添加交互功能
可以在地图上添加标记、弹出窗口、监听用户点击等操作，增强交互性。
常用操作包括：
- 添加标记：L.marker([39.90, 116.40]).addTo(map).bindPopup("这是北京！").openPopup();
- 响应点击事件： map.on('click', function(e) { alert(`你点击的位置：纬度 ${e.latlng.lat}, 经度 ${e.latlng.lng}`); });
- 动态添加标记：结合点击事件，在点击位置添加新标记。
基本上就这些。只要正确引入Leaflet，设置地图容器并初始化，就能快速构建一个支持缩放、拖拽、标记和点击响应的交互式地图。后续可扩展加载GeoJSON数据、自定义图标或集成其他API（如天气、交通）。整个过程完全基于HTML5标准和现代浏览器支持，兼容性强，开发效率高。
