Leaflet@1.9.2标记数字位置异常：显示于标记顶部而非预留区域

核心原因 #

问题突发，大概率是CSS样式冲突、自定义Icon的DOM结构被第三方代码修改，或是contextmenu/旋转类插件的逻辑干扰了数字元素的定位规则。

具体修复步骤 #

1. 校验自定义L.NumberedGreenDivIcon的实现

确保该类正确设置了图标容器的定位基准，以及数字元素的嵌入逻辑：

L.NumberedGreenDivIcon = L.DivIcon.extend({
  options: {
    className: 'leaflet-div-icon numbered-green',
    iconSize: [32, 45], // 按实际图标尺寸调整
    iconAnchor: [16, 45], // 锚点设为图标底部中心
    popupAnchor: [0, -45],
    number: ''
  },
  createIcon: function(oldIcon) {
    var div = L.DivIcon.prototype.createIcon.call(this, oldIcon);
    // 创建独立的数字元素，避免和其他DOM结构冲突
    var numEl = document.createElement('span');
    numEl.className = 'marker-number';
    numEl.textContent = this.options.number;
    div.appendChild(numEl);
    return div;
  }
});

2. 补全/修正对应CSS样式

给数字元素添加精准的定位规则，确保锚定在图标预设区域：

/* 图标容器设为相对定位，作为数字的定位基准 */
.numbered-green {
  position: relative;
  background-size: cover; /* 若用背景图需开启 */
}

/* 数字绝对定位到图标中心（或指定区域） */
.numbered-green .marker-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 按需调整字体样式 */
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000;
}

3. 排查全局样式冲突

用浏览器开发者工具（F12）选中数字元素，查看Computed面板：

• 检查position是否被意外设为static（默认值会导致绝对定位失效）
• 确认top/left/transform是否被其他全局CSS规则覆盖
• 若发现冲突，提升选择器优先级（比如用.leaflet-marker-icon .numbered-green .marker-number）

4. 测试第三方插件干扰

临时注释掉rotationAngle、rotationOrigin或contextmenu相关配置，观察数字是否回归正确位置：

• 若禁用后恢复正常，说明插件修改了图标DOM的定位属性，需针对性调整插件样式或图标锚点
• 比如旋转插件可能叠加了transform属性，导致数字偏移，可微调数字的top/left值抵消影响

5. 紧急修复方案

若以上方法无效，可临时用!important强制覆盖冲突样式（建议后续找到根源后移除）：

.numbered-green .marker-number {
  position: absolute !important;
  top: 12px !important; /* 按图标实际位置调整 */
  left: 50% !important;
  transform: translateX(-50%) !important;
}

内容的提问来源于stack exchange，提问作者Keith D Kaiser