图钉的针尖没对准坐标，偏了 12 像素

现象

使用一张 24×40 像素的图钉图片，图钉针尖在底部中央。 把点位标在地图坐标 116.397428, 39.909230 后， 针尖指向的位置比目标点向南偏约 20 像素，18 级下约 24 米。

放大缩小都偏同样的像素量，说明不是投影问题，而是图标锚点问题。

原因

Leaflet 的 iconAnchor 默认是图标中心 [iconSize/2, iconSize/2]， 即 [12, 20]。地图坐标对应的是这个锚点， 锚点在图片中部，针尖就落在坐标下方 20 像素处。

正确做法是把锚点设在针尖位置，即 [12, 40]。 如果同时设置了 popupAnchor，也要相应调整，否则弹窗会盖住图钉。

排查过程

1. 量出图标的固有尺寸与针尖在图中的像素坐标。
2. 看 L.icon 配置里是否写了 iconAnchor。
3. 用一个 1×1 的测试点标在同一坐标，与图钉针尖比对。
4. 检查是否有 CSS 对 .leaflet-marker-icon 做了 translate 或 margin。

const img = document.querySelector('.leaflet-marker-icon');
console.log(img.naturalWidth, img.naturalHeight);   // 24 40
// 针尖应在 (12, 40)，若锚点为 (12, 20)，向下偏 20 像素

解决方案

锚点按图片实际内容设置，不要照抄示例里的数字。 图标尺寸变化时，锚点必须同步改。

const pin = L.icon({
  iconUrl: '/assets/img/pin.png',
  iconSize: [24, 40],
  iconAnchor: [12, 40],       // 针尖在底部中央
  popupAnchor: [0, -40]       // 弹窗出现在图钉上方
});

L.marker([39.909230, 116.397428], { icon: pin })
  .bindPopup('天安门')
  .addTo(map);

用 divIcon 时可以省掉图片，靠 CSS 定位针尖，锚点同样要算对。

const dot = L.divIcon({
  className: 'custom-pin',
  html: '<div class="pin-head"></div><div class="pin-tip"></div>',
  iconSize: [20, 32],
  iconAnchor: [10, 32]        // 与 .pin-tip 底端对齐
});

验证

图钉针尖与同一坐标的 1×1 测试点重合； 放大到 18 级，针尖仍在坐标位置上，偏差小于 1 像素。

// 读取 marker 的像素位置，与经纬度投影结果比较
const p = map.latLngToContainerPoint([39.909230, 116.397428]);
const icon = document.querySelector('.leaflet-marker-icon').getBoundingClientRect();
const box = map.getContainer().getBoundingClientRect();
const tipX = icon.left - box.left + 12;
const tipY = icon.top - box.top + 40;
console.assert(Math.abs(tipX - p.x) < 1 && Math.abs(tipY - p.y) < 1, '针尖未对齐');

适用版本