Leaflet是一个用于移动端渲染交互式地图开源JavaScript库。它的设计理念是高效、轻量且实用。其体积只有约38KB，但具有大多数开发人员所需要的地图操作功能，能在常见的桌面和移动平台上工作。有着可扩展的插件体系，清晰可读的代码、及优雅 的文档和易于操作的API。
Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB，但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数据格式，地理编码，路线和路线搜索，地图控件和交互等类型的插件共有140多个。这些控件丰富leaflet的功能，同时也可以十分方便的实现自定义的控件具有良好的可扩展性。
这个循序渐进的指南让你快速了解leaflet基础知识，包括建立leaflet地图，使用标记、多线和弹出窗口，以及处理事件。
| 查看本实例 |
在编写地图代码之前，您需要在页面上执行以下操作：
在页面的 <head> 标签与 </head> 标签之间加入如下代码:
<link rel="stylesheet" href="/f2elib/leaflet_1.7.1/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<!-- 确保leaflet.js放在Leaflet's CSS之后 -->
<script src="/f2elib/leaflet_1.7.1/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
在想要创建地图的地方创建一个带有 id 的 div 。
<div id="mapid"></div>
确保地图有一个明确的高度, 例如在CSS中定义:
#mapid { height: 180px; }
现在地图的初始化已经完成了，可以准备用它做一些事情了。
| 查看本实例 |
1.初始化地图，并将其视图设置为我们所选择的地理坐标和缩放级别：
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
默认情况下（因为我们在创建地图实例时没有设置任何参数），地图上的所有鼠标事件和触摸交互功能都是开启的，并且它具有缩放和属性控件。
2.显示地图。
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
确保所有代码都在用于显示地图的 div 和 leaflet.js 包含之后调用。
| 查看本实例 |
除了瓦片之外，你还可以轻松地在地图中添加其他东西，包括标记、折线、多边形、圆圈和弹出窗口。让我们添加一个标记：
var marker = L.marker([51.5, -0.09]).addTo(mymap);
添加圆形标记：
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
添加多边形标记同样简单:
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);
| 查看本实例 |
弹出窗口通常用于将某些信息附加到地图上的特定对象上。Leaflet为此有一个非常简单的方法：
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
尝试点击我们的对象。bindPopup方法将具有指定HTML内容的弹出窗口附加到标记上，因此当您单击对象时弹出窗口出现，openPopup方法（仅用于标记）立即打开所附的弹出窗口。
您还可以把弹出窗口设置为层（当您需要更多的东西，而不是附加弹出窗口到一个对象）：
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);
这里我们使用 openOn 而不是 addTo
因为它在打开一个新的弹出窗口时，处理以前打开的弹出窗口的自动关闭，这样可以增强可用性。
每次在Leaflet中发生某些事情，例如用户单击标记或地图缩放更改时，相应的对象都会发送一个事件，您可以通过函数来处理该事件，它允许您对用户交互作出反应：
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);
}
mymap.on('click', onMapClick);
每个对象都有自己的事件集,侦听器函数的第一个参数是事件对象,它包含关于发生的事件的有用信息。例如，MAP单击事件对象（在上面的示例中为e）具有latlng属性，latlng属性是单击发生的位置。
让我们通过使用弹出而不是alert来改进我们的示例：
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
试着点击地图，你就会看到弹出窗口中的坐标。查看完整的例子 ：