如何在LeafletJS中实现自定义文本ID居中显示在marker图标上

你遇到的问题是L.divIcon会直接替换Marker默认的图标，所以只显示文本没有图标背景。这里提供两种可直接落地的实现方案：

方案1：使用永久Tooltip实现（最简方案） #

不需要修改默认Marker图标，直接通过调整Tooltip样式实现文本居中叠加在图标上，改造成本极低：
首先添加CSS样式：

.leaflet-tooltip.marker-label {
  background: transparent;
  border: none;
  box-shadow: none;
  font-weight: bold;
  color: #fff; /* 可根据Marker图标颜色调整文本对比度 */
  padding: 0;
  margin: 0;
  /* 调整偏移量让文本完全居中在默认Marker上 */
  transform: translate(-50%, -110%);
}

修改JS循环部分的代码即可：

for (let i = 0; i < point_data.length; i++) {
  // 直接创建默认Marker，不替换原有图标
  const marker = new L.marker([point_data[i][2], point_data[i][1]]).addTo(mymap);
  // 绑定永久显示的居中Tooltip作为标签
  marker.bindTooltip(`<b>${point_data[i][0]}</b>`, {
    permanent: true,
    direction: 'center',
    className: 'marker-label'
  });
  // 原有悬浮提示可以改为Popup避免和常驻标签冲突，也可自行调整方向
  marker.bindPopup(`<b>${point_data[i][0]}</b>`);
}

方案2：自定义divIcon包含图标+文本 #

如果需要完全自定义图标样式，可把图标背景和文本都整合到divIcon中，灵活度更高：
首先添加CSS样式：

.my-div-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 宽高和你使用的Marker图标尺寸保持一致即可，默认Leaflet Marker尺寸为25px*41px */
  width: 25px;
  height: 41px;
  /* 替换为你本地存储的Marker图标地址，也可使用base64编码内嵌图标 */
  background: url('你的本地Marker图标路径') no-repeat center center;
  background-size: contain;
  color: #fff;
  font-weight: bold;
  /* 调整偏移让Marker底部精准对齐点位坐标 */
  margin-left: -12px;
  margin-top: -41px;
}

修改JS的divIcon和Marker创建逻辑：

for (let i = 0; i < point_data.length; i++) {
  const div_icon = new L.divIcon({
    className: 'my-div-icon',
    html: `<b>${point_data[i][0]}</b>`,
    // 关闭divIcon默认的边框、背景样式
    iconSize: null,
    iconAnchor: null
  });
  const marker = new L.marker([point_data[i][2], point_data[i][1]], {icon: div_icon}).addTo(mymap);
  // 原有悬浮提示可正常保留
  marker.bindTooltip(`<b>${point_data[i][0]}</b>`, {
    permanent: false, 
    direction: 'right'
  })
}

内容的提问来源于stack exchange，提问作者Umar Yusuf