快速入门指南 - Leaflet - 一个用于交互式地图的 JavaScript 库

Leaflet 快速入门指南

本分步指南将快速帮助您开始使用 Leaflet 基础知识，包括设置 Leaflet 地图、使用标记、折线和弹出窗口以及处理事件。

准备您的页面

在编写任何地图代码之前，您需要在页面上执行以下准备步骤

在文档的头部部分包含 Leaflet CSS 文件

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
     crossorigin=""/>

在 Leaflet 的 CSS 之后包含 Leaflet JavaScript 文件

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
     crossorigin=""></script>

放置一个带有特定 id 的 div 元素，您希望地图位于其中
```
 <div id="map"></div>
```
确保地图容器具有定义的高度，例如通过在 CSS 中设置它
```
#map { height: 180px; }
```

现在您已准备好初始化地图并进行一些操作。

设置地图

查看此独立示例。

让我们创建一个伦敦中心的地图，使用漂亮的 OpenStreetMap 瓦片。从这里开始，我们将使用 JS。首先，我们将初始化地图并将视图设置为我们选择的地理坐标和缩放级别

var map = L.map('map').setView([51.505, -0.09], 13);

默认情况下（因为我们在创建地图实例时没有传递任何选项），地图上的所有鼠标和触摸交互都已启用，并且它具有缩放和属性控件。

请注意，setView 调用也会返回地图对象 - 大多数 Leaflet 方法在没有返回明确值时会像这样工作，这允许方便的 jQuery 式方法链。

接下来，我们将添加一个瓦片层以添加到我们的地图中，在本例中，它是一个 OpenStreetMap 瓦片层。创建瓦片层通常涉及设置 URL 模板用于瓦片图像、属性文本和图层的最大缩放级别。OpenStreetMap 瓦片对于编程您的 Leaflet 地图来说很好，但请阅读瓦片使用政策的 OpenStreetMap，如果您要在生产中使用瓦片。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

确保所有代码都在 div 和 leaflet.js 包含之后调用。就是这样！您现在拥有一个可用的 Leaflet 地图。

值得注意的是，Leaflet 是提供者不可知的，这意味着它不会强制执行特定提供者选择的瓦片。此外，Leaflet 甚至不包含一行特定提供者的代码，因此您可以自由使用其他提供者，如果您需要的话。

标记、圆形和多边形

查看此独立示例。

除了瓦片层，您还可以轻松地向地图添加其他内容，包括标记、折线、多边形、圆形和弹出窗口。让我们添加一个标记

var marker = L.marker([51.5, -0.09]).addTo(map);

添加圆形是相同的（除了将半径以米为单位指定为第二个参数），但允许您通过在创建对象时将选项作为最后一个参数传递来控制它的外观

var circle = L.circle([51.508, -0.11], {
	color: 'red',
	fillColor: '#f03',
	fillOpacity: 0.5,
	radius: 500
}).addTo(map);

添加多边形同样简单

var polygon = L.polygon([
	[51.509, -0.08],
	[51.503, -0.06],
	[51.51, -0.047]
]).addTo(map);

使用弹出窗口

查看此独立示例。

当您想要将一些信息附加到地图上的特定对象时，通常使用弹出窗口。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.513, -0.09])
	.setContent("I am a standalone popup.")
	.openOn(map);

在这里我们使用 openOn 而不是 addTo，因为它在打开新弹出窗口时会处理自动关闭先前打开的弹出窗口，这对可用性很有好处。

处理事件

每当 Leaflet 中发生某些事情时，例如用户单击标记或地图缩放更改，相应的对象会发送一个事件，您可以使用函数订阅该事件。它允许您对用户交互做出反应

function onMapClick(e) {
	alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

每个对象都有自己的一组事件 - 请参阅文档以获取详细信息。监听器函数的第一个参数是一个事件对象 - 它包含有关发生的事件的有用信息。例如，地图单击事件对象（e 在上面的示例中）具有 latlng 属性，它是单击发生的位置。

让我们通过使用弹出窗口而不是警报来改进我们的示例

var popup = L.popup();

function onMapClick(e) {
	popup
		.setLatLng(e.latlng)
		.setContent("You clicked the map at " + e.latlng.toString())
		.openOn(map);
}

map.on('click', onMapClick);

尝试单击地图，您将在弹出窗口中看到坐标。查看完整示例 →

现在您已经学习了 Leaflet 基础知识，并且可以立即开始构建地图应用程序！不要忘记查看详细的文档或其他示例。