首页 / Leaflet / API 文档

DivIcon

先看结论

用一段 HTML 加 CSS 充当标记外观的图标类，不需要任何图片资源。

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

L.divIcon(options) → DivIcon

参数

选项	默认值	说明
`html`	false	图标内部的 HTML 字符串或 DOM 节点；false 表示空 div
`className`	'leaflet-div-icon'	容器 class；默认值会给白底黑边方块，自定义外观时置空
`iconSize`	[12, 12]	图标像素尺寸 `[宽, 高]`
`iconAnchor`	[0, 0]	图标相对地理点的偏移，决定「哪一点压在地理坐标上」
`popupAnchor`	[0, 0]	气泡相对图标锚点的偏移
`tooltipAnchor`	[0, 0]	提示框相对图标锚点的偏移
`bgPos`	null	背景图位置，仅图片型图标有意义

成员

成员	返回值	说明
`createIcon(oldIcon)`	HTMLElement	生成图标 DOM，可复用旧节点避免重排
`createShadow(oldIcon)`	HTMLElement	DivIcon 没有阴影，返回 null
`options.iconSize`	Point	读取尺寸，可在构造后修改再重建
`L.marker(latlng, { icon: icon })`	Marker	传入图标实例，替换默认图钉

<style>
  .badge {
    width: 26px; height: 26px; border-radius: 50%;
    background: #1f5fd0; color: #fff; font: 600 12px/26px sans-serif;
    text-align: center; box-shadow: 0 0 0 3px rgba(31, 95, 208, .2);
  }
  .tag {
    padding: 3px 8px; border-radius: 4px; white-space: nowrap;
    background: #16181d; color: #fff; font: 12px/1.4 sans-serif;
  }
</style>

var badge = L.divIcon({
  className: '',
  html: '<div class="badge">7</div>',
  iconSize: [26, 26],
  iconAnchor: [13, 13]
});

L.marker([39.907, 116.391], { icon: badge })
  .bindPopup('当前站点 7 条告警')
  .addTo(map);

var tag = L.divIcon({
  className: '',
  html: '<div class="tag">北京南站</div>',
  iconSize: [76, 24],
  iconAnchor: [38, 34],
  tooltipAnchor: [0, -20]
});

一定要显式写 className: ''。默认的 leaflet-div-icon 自带白色背景和 1px 边框，自定义样式会被这层方块包住，看起来像没生效。

iconAnchor 与 iconSize 不匹配会让标记整体偏移：一个 26×26 的圆形图标，锚点应取 [13, 13] 让圆心对准坐标；尖角朝下的图钉则取 [宽的一半, 高]。图标内有文字时不要用 CSS 把容器设为 display:none，否则拿不到尺寸。

引用本文

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