地图标注精确定位需用 position: absolute 配合 top/left 像素值，父容器必须设 position: relative；top/left 必须由 map.getPixelFromCoordinate 等接口实时计算像素坐标，不可硬算或缓存；需协同控制 z-index 和 pointer-events，并用 requestAnimationFrame 优化重绘。
position: absolute 配合 top/left 实现标注精确定位
地图标注的核心不是“画图”，而是把一个 div 或 img 标签，按经纬度（或像素坐标）钉在正确位置。CSS 本身不认经纬度，所以你得先完成坐标转换——比如把地图容器设为 position: relative，再让标注元素用 position: absolute，靠 top 和 left 像素值落点。
常见错误是忘记给父容器加 position: relative，结果标注飞到整个页面左上角；或者用 % 单位写 top/left，但地图缩放时百分比会错位，必须用像素值。
- 标注元素必须设
position: absolute，且父级（地图容器）必须有position: relative或absolute -
top和left的值应来自 JS 计算出的像素坐标，不是原始经纬度 - 避免用
transform: translate()替代top/left，否则可能影响点击区域或 z-index 层叠 - 若地图支持缩放，每次 zoom 后必须重算所有标注的
top/left，不能只靠 CSS 动画过渡
map.getPixelFromCoordinate() 类接口才是定位前提
你写的 CSS 再准也没用，如果传进去的 top 和 left 是瞎猜的。真实项目里，99% 的交互式地图（OpenLayers、Leaflet、Mapbox GL JS）都提供类似 getPixelFromCoordinate() 的方法，它把地理坐标转成容器内的像素位置——这才是你该喂给 top/left 的数字。
容易踩的坑：有人直接拿地图图片的宽高比例硬算，结果地图投影一变（比如从 Web Mercator 换成 EPSG:4326），坐标全偏；还有人没考虑地图容器的 padding 或 border，导致像素偏移几像素，放大后特别明显。
立即学习“前端免费学习笔记（深入）”；
- OpenLayers 用
map.getPixelFromCoordinate([lon, lat])，返回[x, y]像素数组 - Leaflet 用
map.latLngToLayerPoint({lat, lng})，注意返回的是相对于地图图层左上角的偏移 - 务必用地图实例的当前视图状态计算，别缓存坐标后长期复用
- 如果地图容器被 CSS 缩放（如
transform: scale(0.8)），需额外除以缩放系数校正像素值
z-index 和 pointer-events 要协同控制点击优先级
多个标注堆在一起时，光靠 z-index 不一定管用——如果父容器用了 transform 或 opacity < 1，会创建新的层叠上下文，z-index 就只在那个局部生效。更麻烦的是，标注常要响应点击，但又不能挡住底图的拖拽和缩放。
典型现象：点了标注没反应，其实是底图事件捕获了；或者点了标注，地图却跟着拖动。这时候光调 z-index 没用，得配 pointer-events。
- 标注容器设
pointer-events: auto（默认），确保能触发 click/mouseenter - 底图容器保持
pointer-events: auto，不要全局关掉 - 若标注含子元素（如关闭按钮），子元素也需明确
pointer-events，避免穿透 - 避免对整个地图容器设
pointer-events: none，再单独开标注的事件——这会让地图手势失效
缩放/平移时标注抖动或延迟？检查重绘时机和防抖
地图频繁缩放时，如果每次 moveend 或 zoomend 才批量更新标注位置，用户会看到标注“跳一下”才到位；如果每帧都重算，又可能触发过多 DOM 操作，卡顿。
真正稳的方式不是靠 CSS 过渡，而是用 requestAnimationFrame 控制更新节奏，并过滤掉中间无效状态。另外，别在 moveend 里直接操作 DOM，先 batch 计算好所有坐标，再一次性更新 style。
- 监听
render或postrender（OpenLayers）这类渲染钩子，比moveend更及时 - 用
requestAnimationFrame包裹 DOM 更新，避免 layout thrashing - 对高频触发的事件（如鼠标滚轮缩放），加 16ms 防抖，防止重复计算
- 标注元素建议用
will-change: transform提前提示浏览器优化，但仅限活跃标注，别全量加
最易被忽略的一点：地图容器的 overflow 设为 hidden 时，标注若超出边界会被裁掉，但它的事件区域还在——看起来没显示，却能点中。这种“幽灵标注”很难排查，得配合 visibility: hidden 或 display: none 主动控制显隐。
