必须调用 map.invalidatesize() 更新投影状态，否则容器尺寸变化后 latlngtocontainerpoint 像素坐标错位；pointtolatlng 需传入相对容器的坐标，须减去 getboundingclientrect() 偏移；css 定位图标时父容器需设 position: relative 且基于 latlngtocontainerpoint 结果设置 left/top。
地图容器尺寸变化后，latLngToContainerPoint 计算的像素位置偏移
Leaflet 的 latLngToContainerPoint 返回的是相对于当前容器左上角的像素坐标，但它不自动监听容器尺寸变化。一旦地图容器被缩放、折叠、响应式重排（比如浏览器窗口 resize 或 Vue 中 v-if 切换），缓存的投影状态就失效了。
- 必须在容器尺寸变更后手动触发
map.invalidateSize()，否则后续所有像素计算都会错位 - 如果用 CSS 设置了
transform: scale()或zoom，latLngToContainerPoint仍按原始尺寸算——它不感知 CSS 缩放，得自己用getContainer().getBoundingClientRect()校正 - React/Vue 中常见坑：地图初始化时容器宽高为 0，导致首次投影失败；确保 dom 节点已挂载且尺寸稳定后再调用
用 pointToLatLng 反向还原时，经纬度偏差大
pointToLatLng 是 latLngToContainerPoint 的逆运算，但它的输入是「容器内像素坐标」，不是屏幕坐标或绝对定位坐标。很多人直接拿 Event.clientX/clientY 去算，结果偏差几公里。
- 必须减去地图容器左上角的页面偏移：
const rect = map.getContainer().getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; - 注意：Leaflet v1.9+ 默认启用
trackResize，但若关闭了（trackResize: false），pointToLatLng会基于过期的容器尺寸计算 - 移动端 touch 事件需用
e.touches[0].clientX，且要防止默认行为干扰坐标获取
CSS 定位图标时，position: absolute 图标飘移
把图标作为独立 DOM 元素（非 Leaflet Marker）叠加在地图上时，用 position: absolute 配合 js 动态设置 left/top 最常见，但容易飘。
- 父容器必须是地图容器本身（
map.getContainer()），且其position不能是Static（默认值），至少设为relative - 不要用
map._container这类私有属性——它在 Leaflet v2 中已被移除，v1.9 中也不保证稳定 - 图标元素的
top/left应基于latLngToContainerPoint结果，但要注意：Leaflet 返回的y是从上往下增长，CSS 的top也是从上往下，可直接赋值；x同理 - 如果地图用了
maxZoom或minZoom，缩放时像素坐标线性变化，但图标的transform: scale()若没同步，视觉大小会失配
webgl 地图（如 Mapbox GL）里做同样事，project 和 unproject 行为不同
Mapbox GL 的 project 返回的是「画布坐标」（canvas pixel space），原点在左下角，和 Leaflet 的左上角相反；而且它受 pitch（俯仰角）和 bearing（旋转）影响，纯经纬度转像素不是线性映射。
立即学习“前端免费学习笔记（深入）”；
- 调用
map.project([lng, lat])得到的是{x, y}，其中y是从下往上增长，转 CSStop时要写成top: canvasHeight - y + 'px' - 若地图开启了
pitch > 0，同一经纬度在不同视角下像素位置不同，project仍有效，但人工放置的 DOM 图标不会随视角“立体移动”，看起来会贴地漂浮 - Mapbox GL 不建议在容器上直接 append DOM 图标——推荐用
addImage+GeoJSONSource+symbollayer，性能和同步性更好
实际写的时候，最常漏掉的是容器尺寸校验和坐标系原点对齐。Leaflet 看似简单，但 latLngToContainerPoint 的“容器”二字，真不是白写的。