Leaflet v1.9.3中小尺寸divIcon（<14px）无法居中的解决咨询

Leaflet的divIcon默认锚点（iconAnchor）是基于常规尺寸图标设计的，当图标尺寸小于14x14时，默认锚点无法匹配图标中心，导致偏移。以下两种方法可以无需手动计算锚点，实现自动居中：

方法一：自动绑定锚点与图标尺寸 #

通过封装函数，生成divIcon时自动将iconAnchor设置为图标尺寸的一半，确保锚点始终指向图标中心：

// 封装生成居中divIcon的函数
function createCenteredDivIcon(html, iconSize) {
  return L.divIcon({
    html: html,
    iconSize: iconSize,
    iconAnchor: [iconSize[0]/2, iconSize[1]/2], // 锚点设为图标中心
    className: ''
  });
}

// 使用示例
var marker = L.marker([51.5, -0.09], {
  icon: createCenteredDivIcon(myIcon('blue', 6), [6,6])
}).addTo(map);

方法二：CSS Transform强制居中 #

通过自定义CSS类，利用绝对定位和transform实现图标自动居中，无需依赖iconAnchor参数：

首先在样式中添加：

.centered-div-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

然后创建divIcon时指定该类：

var marker = L.marker([51.5, -0.09], {
  icon: L.divIcon({
    html: myIcon('blue', 6),
    iconSize: [6,6],
    className: 'centered-div-icon'
  })
}).addTo(map);

完整修改后的示例代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <style type='text/css'>
      html, body { margin: 0; padding: 0; border: 0; }
      #map { height: 100vh; }
      /* 添加居中样式 */
      .centered-div-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
    <script>
      var map;
      var myIcon = (color = 'red', b = 24) => `
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${b} ${b}">
    <circle fill="${color}" cx="${b/2}" cy="${b/2}" r="${b/2}" />
  </svg>`;
      function init() {
        var map = L.map('map').setView([50.0, 0.0], 13);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 18
        }).addTo(map);
        // 大图标
        var marker = L.marker(
          [51.5, -0.09], {
          icon: L.divIcon({
            html: myIcon('red', 50),
            iconSize: [50,50],
            className: 'centered-div-icon'
          }),
        }).addTo(map);
        // 中等图标
        var marker = L.marker(
          [51.5, -0.09], {
          icon: L.divIcon({
            html: myIcon('green', 20),
            iconSize: [20,20],
            className: 'centered-div-icon'
          }),
        }).addTo(map);
        // 小图标
        var marker = L.marker(
          [51.5, -0.09], {
          icon: L.divIcon({
            html: myIcon('blue', 6),
            iconSize: [6,6],
            className: 'centered-div-icon'
          }),
        }).addTo(map);
        map.panTo(marker.getLatLng());
      }
    </script>
  </head>
  <body onload='init();'>
    <div id="map"></div>
  </body>
</html>

两种方法对比：

• 方法一基于Leaflet原生API，适合需要严格遵循图标系统参数的场景；
• 方法二通过CSS实现，更灵活，无需关注图标尺寸变化，适配动态生成的多尺寸图标。

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