准备

首先，要创建一个页面。在页面头部引入 CSS：

<link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />

引入 JavaScript：

<script
    src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin="">
</script>

准备地图容器：

<div id="map"></div>

地图容器必须有确定的高度。在 CSS 中定义如下：

#map { height: 180px; }

设置地图

创建一个地图，使用 Mapbox 街道图层，地图中心点是伦敦坐标。首先，初始化地图，并将它的视图和缩放级别设定为选中的地理坐标点：

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

注意，setView() 方法的返回值是 map 本身，因此可以链式调用。

接下来增加一个瓦片图层（tile layer）。创建图层通常涉及设置瓦片图片的 URL 模版，来源文本和最大缩放级别。

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(map);

标记、圆和多边形

除了瓦片图层，还可以增加一些标记、圆形、折线、多边形和弹框等元素。首先，看一下标记的添加代码：

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() 方法将标记和弹框绑定，点击标记就会触发弹框。openPopup() 方法会自动打开绑定的弹框。

也可以将弹框当作图层：

var popup = L.popup()
    .setLatLng([51.513, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(map);

此处的 openOn() 会自动处理其他弹框的关闭。

处理事件

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

map.on('click', onMapClick)

还可以使用弹框代替 alert 系统警告框：

const 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);

参考文档

1. Quick Start Guide - Leaflet