首页 / Leaflet / API 文档

Icon

先看结论

标记的外观描述对象，分图片图标与 HTML 图标两类。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-27 · 引用本文

L.icon(options) → Icon

L.divIcon(options) → DivIcon

公共参数

参数	默认	说明
`iconSize`	[12, 12]（divIcon）	图标宽高，`[宽, 高]`
`iconAnchor`	[0, 0]	图标上哪个点对准坐标；不设会偏
`popupAnchor`	[0, 0]	弹窗相对锚点的偏移
`tooltipAnchor`	[0, 0]	悬停提示的偏移
`className`	''	附加类名；divIcon 默认值是 `'leaflet-div-icon'`

图片图标专属

参数	说明
`iconUrl`	图标地址，必填
`iconRetinaUrl`	高清屏使用的二倍图
`shadowUrl`	阴影图片地址
`shadowSize`	阴影尺寸
`shadowAnchor`	阴影锚点
`bgPos`	雪碧图背景偏移

DivIcon 专属

参数	说明
`html`	字符串或 DOM 节点，直接作为图标内容
`bgPos`	背景图偏移，用于精灵图

方法

方法	说明
`createIcon(oldIcon?)`	生成 DOM 节点，内部调用
`createShadow(oldIcon?)`	生成阴影节点，图片图标专属
`L.Icon.Default.mergeOptions(opts)`	全局修改默认图标路径
`L.Icon.Default.imagePath`	默认图标的目录前缀

var dot = L.divIcon({
  className: '',
  html: '<div class="pin"></div>',
  iconSize: [16, 16],
  iconAnchor: [8, 8],
  popupAnchor: [0, -10]
});

L.marker([39.907359, 116.391263], { icon: dot })
  .bindPopup('自定义圆点')
  .addTo(map);

锚点是「图标的哪个像素对准坐标」。一个 16×16 的圆点用 iconAnchor: [8, 8] 让中心落点；一个底部带尖角的图钉，锚点应取尖角位置，例如 [16, 40]。锚点错了，所有标记会整体偏移，而且看起来只差一点点，很难第一时间发现。

默认图标 404 的原因

L.Icon.Default 会从 Leaflet CSS 所在目录推断图片路径。用打包工具把 CSS 内联、或者把 JS 与 CSS 分开放置时，推断结果错误，控制台出现 marker-icon.png 404，地图上只剩一个阴影。显式指定路径即可：

L.Icon.Default.mergeOptions({
  iconRetinaUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/images/marker-icon-2x.png',
  iconUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/images/marker-icon.png',
  shadowUrl: 'https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/images/marker-shadow.png'
});

DivIcon 的白底框

L.divIcon 默认带 leaflet-div-icon 类，样式是白底黑边的小方块。只写 html 不写 className: ''，看到的往往是一个带框的图标。清空类名后再用自己的 CSS 控制外观，这是自定义图标的标准写法。

图标与性能

图片图标在数量多时会产生大量图片请求，每个标记还带 DOM 与事件监听。用 divIcon 画纯 CSS 圆点可以省掉图片请求；数量再上一个量级时，改用 L.circleMarker 或聚合方案，渲染开销更低。

引用本文

经纬志（2026）。《Icon》。https://www.jingweizhi.com/leaflet/api/icon.html（访问日期 2026-11-03）。