最稳定方式是用 position: absolute + top/left 像素值配合父容器 position: relative；必须显式设置地图容器为 relative，使用 api 提供的坐标转像素方法实时重算位置，并协同控制 z-index 和 pointer-events。
直接用 position: absolute + top/left 像素值，配合地图容器的 position: relative，是最稳定、兼容性最好、也最可控的方式。别碰 transform: translate() 或百分比定位——它们在缩放、拖动时会失准。
父容器必须设 position: relative
这是所有后续定位生效的前提。Google Maps 的 <gmp-map></gmp-map> 元素本身不自动创建层叠上下文，也不默认设为 relative；如果你把自定义标记直接插进它内部（比如用 appendChild()），但没给它加 position: relative，标记就会相对于 定位，瞬间飞到页面左上角。
- 务必在初始化地图后，显式设置：
mapElement.style.position = 'relative' - 如果用的是封装库（如 @googlemaps/react-wrapper），检查其容器是否已设好，否则手动补上
- 不要依赖 CSS 框架默认样式——很多 UI 库会重置
position，得单独覆盖
top 和 left 必须来自像素坐标，不能硬算
CSS 不认识经纬度。你传给 top 和 left 的必须是整数像素值，且每次地图视图变化（zoom、center、drag）都要重算。Google Maps JS API 提供 getPixelFromCoordinate()，OpenLayers 用 getPixelFromCoordinate()，Mapbox GL JS 是 project() ——这些才是唯一可信的入口。
- 错误做法：把经纬度直接乘个缩放系数当像素用，或缓存一次计算结果反复用
- 正确时机：监听
bounds_changed、zoom_changed、dragend等事件后再批量重算 - 性能注意：避免在
mousemove中实时调用，改用requestAnimationFrame节流
z-index 和 pointer-events 要协同控制
标记要 clickable，又不能挡住地图手势（比如双指缩放），光靠 z-index 不够。常见问题是标记盖住了地图，导致拖不动。
- 标记元素必须设
pointer-events: auto（默认值即可），否则点击无效 - 地图容器本身不要设
pointer-events: none，否则整个地图失活 - 若需让标记“穿透”部分事件（例如只响应 click，不拦截 drag），可用
pointer-events: none+ 子元素pointer-events: auto分层处理 -
z-index值建议从 100 起跳，避开地图内部默认层（通常在 1–50 区间）
动态更新标记位置时别直接操作 style 属性
高频更新（比如动画轨迹点）时，频繁写 element.style.left = 'xxxpx' 触发强制同步布局，卡顿明显。
- 优先用
Object.assign(element.style, { left: 'xxxpx', top: 'yyypx' })批量赋值 - 更优方案：用
element.setAttribute('style', 'left:xxxpx;top:yyypx;')，减少 JS 引擎与渲染引擎的交互次数 - 极端性能场景（>100 个标记）：改用
Canvas或WebGL渲染，CSS 定位只用于少量高亮标记
真正麻烦的不是第一次定位，而是缩放后坐标失效、拖动时标记“粘滞”、多层叠加时 z-index 冲突——这些问题都藏在事件监听时机和 DOM 层级结构里，而不是 CSS 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
