leaflet地图库使用教程

Leaflet是一个流行的JavaScript开源地图库，它专为Web应用程序设计轻量级、交互式的矢量地图。以下是简单的Leaflet使用教程：

1. **引入库**：首先，在HTML文件头部引入leaflet.js文件以及相关的地图瓦片服务（如OpenStreetMap的CSS样式）：

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

2. **初始化地图**：

<div id="mapid" style="height: 500px;"></div>
<script>
var map = L.map('mapid').setView([51.505, -0.09], 13); // [纬度, 经度]，初始缩放级别
</script>

这里，我们创建了一个ID为`mapid`的div容器，并设置了地图中心点（伦敦坐标）和初始缩放等级。

3. **添加图层**：
可以通过`.addLayer()`方法添加各种图层，比如矢量标记(`L.marker()`)、图像标记(`L.imageOverlay()`)或瓦片层(`L.tileLayer()`)：

L.marker([51.5, -0.09]).addTo(map); // 添加一个默认图标标记
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    maxZoom: 18,
}).addTo(map);

4. **交互事件**：
可以给地图或标记绑定事件，比如点击(`on('click')`)、鼠标移动(`on('mousemove')`)等：

map.on('click', function(e) {
    var latlng = e.latlng;
    console.log(latlng);
});