根本原因是未按实际渲染尺寸动态换算坐标：需用view包裹image并监听@load，通过createSelectorQuery获取真实宽高，按比例转换原始坐标；每个hotspot须有独立状态字段并用:key绑定唯一id；swiper切换时须清空旧坐标并重新计算。
标记点坐标为什么总偏移？
根本原因是直接用 position: absolute 写死 left/top，而没考虑 <image> 的 mode（比如 aspectFill 或 scaleToFill）和实际渲染尺寸。原始坐标（如后端返回的 {x: 240, y: 180}，原图 800×600）必须按屏幕上的真实宽高比例换算，否则一换图、一改 mode，点就飞了。
正确做法：
- 用 <view class="image-wrapper"> 包住 <image>，设 position: relative
- 标记点 <view class="hotspot"> 放在 wrapper 内，position: absolute
- 必须监听 @load，用 uni.createSelectorQuery() 查 image 和 wrapper 的实际宽高
- 计算缩放比：scaleX = wrapperWidth / imageNaturalWidth，scaleY = wrapperHeight / imageNaturalHeight
- 最终 left/top = originalX * scaleX、originalY * scaleY
点击状态为什么全量联动？
写 :class="{ active: isHotspotActive } 这种全局布尔值，会导致所有点一起变色——Vue 不知道你点的是哪一个。
必须给每个标记点配独立状态字段：
- 后端返回的数组里带唯一 id 字段（如 "id": "hs_001"）
- 前端数据结构包含 isMarked: false，例如：{ id: 'hs_001', x: 240, y: 180, isMarked: false }
- v-for="(point, index) in hotspotList" 时，绑定 :key="point.id"
- 点击事件传 point.id，然后执行：this.hotspotList.find(p => p.id === id).isMarked = !isMarked
swiper 切换后标记点错位怎么办？
swiper 复用 item 或重新加载 image 时，旧的 hotspot DOM 仍挂着上一页的坐标，不清理就会漂移甚至重叠。
必须在 @change 回调里做三件事：
- 清空当前所有 hotspot 的 left/top 行内样式（例如用 ref 或 class 批量 removeAttribute）
- 对当前页的 <image> 重新触发 @load 或主动查尺寸
- 拿到新尺寸后，重算并设置每个点的 left/top
- 动效优先用 transform: translate(x, y) + transition，别直接改 left/top（避免 layout thrashing）
为什么图片一缩放标记就失效？
因为 <image> 的 mode 控制裁剪/拉伸行为，但它的视觉区域和 DOM 尺寸不一定一致。比如 aspectFill 会裁边，scaleToFill 会拉伸变形，此时原始坐标映射关系彻底失效。
关键应对点：
- 绝对不能依赖图片的 width/height 属性值，必须用 createSelectorQuery 获取渲染后的真实尺寸
- 如果后端只返回原始坐标，需同步提供原图宽高（originalWidth/originalHeight），否则无法反推比例
- 避免在 onReady 里提前计算坐标——此时 image 可能还没加载完，尺寸为 0
- 调试时直接 console.log(wrapperRect, imageRect)，比猜“是不是 mode 搞错了”快得多
