首页 / Leaflet / API 文档
Marker
先看结论
地图上的点标记，可以带图标、弹出窗口，也可以拖拽。
L.marker(latlng, options) → Marker
构造参数
| 参数 | 默认 | 说明 |
|---|---|---|
icon | 默认蓝色图钉 | L.icon 或 L.divIcon |
draggable | false | 是否可拖拽 |
keyboard | true | 是否可键盘聚焦 |
title | '' | 悬停时浏览器原生提示 |
alt | 'Marker' | 图片替代文本 |
zIndexOffset | 0 | 手动调整层级，让某个标记压在上面 |
opacity | 1 | 透明度 |
riseOnHover | false | 悬停时自动提到最上层 |
图标
默认图标需要一张 PNG 图片。如果不想管图片资源，用 divIcon 直接写 HTML 更省事：
var icon = L.divIcon({
className: '',
html: '<div style="width:14px;height:14px;border-radius:50%;background:#1f5fd0;border:2px solid #fff"></div>',
iconSize: [14, 14],
iconAnchor: [7, 7]
});
L.marker([39.9, 116.4], { icon: icon }).addTo(map);
iconAnchor 决定图标的哪个点对准坐标。[7, 7] 表示中心点，
不设的话默认按左上角对齐，看起来会偏。
弹出窗口
| 方法 | 说明 |
|---|---|
bindPopup(content) | 绑定，content 支持 HTML 字符串或 DOM 节点 |
openPopup() | 立即打开 |
closePopup() | 关闭 |
bindTooltip(text) | 绑定悬停提示，比 popup 轻 |
setPopupContent(html) | 运行时替换内容 |
L.marker([39.907359, 116.391263])
.bindPopup('<b>天安门</b><br>39.907359, 116.391263')
.on('click', function (e) {
console.log(e.latlng);
})
.addTo(map);常用方法
| 方法 | 说明 |
|---|---|
setLatLng(latlng) | 移动位置 |
getLatLng() | 读取位置 |
setIcon(icon) | 换图标 |
setOpacity(n) | 改透明度 |
setZIndexOffset(n) | 改层级 |
remove() | 从地图上移除 |
拖拽事件
L.marker([39.9, 116.4], { draggable: true })
.on('dragend', function (e) {
var p = e.target.getLatLng();
console.log(p.lat, p.lng);
})
.addTo(map);大量标记不要一个个 addTo。先放进 L.layerGroup()，
再一次性添加到地图，批量移除时也只需要 group.clearLayers()。
超过几百个点时改用 L.markerClusterGroup 做聚合。
经纬志（2026）。《Marker》。https://www.jingweizhi.com/leaflet/api/marker.html（访问日期 2026-11-03）。