Div Icon

<!--
  示例：DivIcon 图标
  要点：纯 CSS 绘制徽章、标签、脉冲点与靶标四种标记、iconAnchor 对齐、尺寸切换
  依赖：Leaflet 1.9.4 · jsDelivr CDN
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DivIcon 图标</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
<style>
  html,body{height:100%;margin:0}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif}
  .bar{flex:0 0 auto;padding:8px 12px;background:#f6f7f9;border-bottom:1px solid #e3e6ea;
       display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:#58606e}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:4px;cursor:pointer;
       border:1px solid #ccd1d9;background:#fff;color:#16181d}
  .bar button:hover{background:#eef0f3}
  .bar button.on{background:#1f5fd0;border-color:#1f5fd0;color:#fff}
  #map{flex:1 1 auto;min-height:0}

  /* 1. 编号徽章：圆心即坐标 */
  .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,.22), 0 2px 6px rgba(0,0,0,.25)}

  /* 2. 文字标签：带小尖角，锚点在尖角底部 */
  .tag{position:relative;padding:3px 9px;border-radius:4px;background:#16181d;color:#fff;
    font:12px/1.5 sans-serif;white-space:nowrap;text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.28)}
  .tag::after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-5px;
    border:5px solid transparent;border-top-color:#16181d;border-bottom:0}

  /* 3. 脉冲点：外层扩散圈 */
  .pulse{position:relative;width:14px;height:14px;border-radius:50%;background:#c2410c;
    border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
  .pulse::before{content:'';position:absolute;inset:-3px;border-radius:50%;
    border:2px solid rgba(194,65,12,.6);animation:ping 1.8s ease-out infinite}
  @keyframes ping{
    0%{transform:scale(1);opacity:.9}
    100%{transform:scale(2.4);opacity:0}
  }

  /* 4. 靶标：外环加中心点 */
  .target{width:30px;height:30px;border-radius:50%;border:2px solid #17694a;
    background:rgba(34,197,94,.15);position:relative;box-sizing:border-box}
  .target::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;
    margin:-3px 0 0 -3px;border-radius:50%;background:#17694a}
  .target span{position:absolute;left:36px;top:50%;transform:translateY(-50%);
    font:11px/1 sans-serif;color:#17694a;white-space:nowrap}
</style>
</head>
<body>
<div class="bar">
  <button id="size">放大图标</button>
  <button id="labels" class="on">常驻标签</button>
  <button id="rebuild">重建图标</button>
  <span id="hint">四种图标都由 HTML + CSS 绘制，不使用图片资源</span>
</div>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
  'use strict';

  var map = L.map('map', { center: [39.912, 116.395], zoom: 14 });

  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
    maxZoom: 19,
    attribution: 'Tiles © Esri'
  }).addTo(map);

  var group = L.layerGroup().addTo(map);
  var big = false;
  var labelsAlways = true;

  var SPOTS = [
    { ll: [39.907359, 116.391263], kind: 'badge', text: '天安门', no: '1' },
    { ll: [39.914700, 116.410600], kind: 'tag', text: '王府井' },
    { ll: [39.899400, 116.397500], kind: 'pulse', text: '前门' },
    { ll: [39.909700, 116.374200], kind: 'target', text: '西单' }
  ];

  function makeIcon(kind, item) {
    var k = big ? 1.4 : 1;

    if (kind === 'badge') {
      var d = Math.round(26 * k);
      return L.divIcon({
        className: '',
        html: '<div class="badge" style="width:' + d + 'px;height:' + d +
              'px;line-height:' + d + 'px;font-size:' + Math.round(12 * k) + 'px">' +
              item.no + '</div>',
        iconSize: [d, d],
        iconAnchor: [d / 2, d / 2],
        tooltipAnchor: [0, -d / 2 - 4]
      });
    }

    if (kind === 'tag') {
      var w = Math.round(76 * k);
      var h = Math.round(24 * k);
      return L.divIcon({
        className: '',
        html: '<div class="tag" style="font-size:' + Math.round(12 * k) +
              'px;padding:' + Math.round(3 * k) + 'px ' + Math.round(9 * k) + 'px">' +
              item.text + '</div>',
        iconSize: [w, h],
        iconAnchor: [w / 2, h + 5],
        tooltipAnchor: [0, -h - 10]
      });
    }

    if (kind === 'pulse') {
      var p = Math.round(14 * k);
      return L.divIcon({
        className: '',
        html: '<div class="pulse" style="width:' + p + 'px;height:' + p + 'px"></div>',
        iconSize: [p, p],
        iconAnchor: [p / 2, p / 2]
      });
    }

    var t = Math.round(30 * k);
    return L.divIcon({
      className: '',
      html: '<div class="target" style="width:' + t + 'px;height:' + t + 'px"></div>',
      iconSize: [t, t],
      iconAnchor: [t / 2, t / 2],
      tooltipAnchor: [0, -t / 2 - 4]
    });
  }

  function build() {
    group.clearLayers();

    SPOTS.forEach(function (item) {
      L.marker(item.ll, { icon: makeIcon(item.kind, item) })
        .bindTooltip(item.text, {
          direction: item.kind === 'tag' ? 'top' : 'right',
          permanent: labelsAlways && item.kind !== 'tag',
          opacity: 0.95
        })
        .bindPopup('<b>' + item.text + '</b><br>' + item.kind + ' 图标')
        .addTo(group);
    });
  }

  build();

  document.getElementById('size').addEventListener('click', function () {
    big = !big;
    this.textContent = big ? '恢复原尺寸' : '放大图标';
    this.classList.toggle('on', big);
    build();
  });

  document.getElementById('labels').addEventListener('click', function () {
    labelsAlways = !labelsAlways;
    this.textContent = labelsAlways ? '常驻标签' : '悬停显示';
    this.classList.toggle('on', labelsAlways);
    build();
  });

  document.getElementById('rebuild').addEventListener('click', function () {
    build();
    document.getElementById('hint').textContent = '图标已重建，锚点保持不变';
  });
})();
</script>
</body>
</html>