Pin tip misses the coordinate by 12 pixels

• At z18 the pin tip points about 24 m south of `116.397428, 39.909230`
• The offset stays a constant pixel amount at every zoom, so it is not a projection error
• `img.naturalWidth` and `img.naturalHeight` are `24` and `40` while `iconAnchor` was never set

1. Measure the icon's intrinsic size and the tip's pixel position inside it
2. Check whether `L.icon` specifies `iconAnchor`
3. Place a 1x1 test marker at the same coordinate and compare it with the pin tip
4. Check CSS transforms or margins applied to `.leaflet-marker-icon`
5. Verify `popupAnchor` matches the new anchor

Set `iconAnchor: [12, 40]` for a 24x40 pin with its tip at bottom center and `popupAnchor: [0, -40]`; for a `divIcon`, align the anchor with the tip element (`iconSize: [20, 32], iconAnchor: [10, 32]`).

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);

• Copying `iconAnchor` numbers from an example whose icon has different dimensions
• Fixing the anchor but leaving `popupAnchor` unchanged, so the popup covers the pin head