uni-app map地图在缩放的时候标记点会偏移

https://ask.dcloud.net.cn/question/137892

在uni-app中使用map组件时，标记点（markers）在缩放时出现偏移是常见问题，通常由以下原因及解决方案导致：

1. 坐标系不一致

   • 地图容器与标记点使用的坐标系不匹配（如GCJ-02与BD-09）。
   • 解决：确保所有坐标统一为同一坐标系（推荐使用GCJ-02）。

2. 标记点未动态更新

   • 缩放后地图中心点或视野变化，但标记点未重新计算位置。
   • 解决：监听regionchange事件，在缩放结束时（type="end"）通过mapContext.getCenter()获取最新中心点，并重新计算标记点坐标。

3. 自定义图标偏移

   • 使用自定义图标时，iconPath的锚点（原点）未对齐。
   • 解决：通过markers的anchor属性调整图标偏移量，例如{x: 0.5, y: 1}表示底部中心为锚点。

4. 地图组件渲染延迟

   • 地图渲染未完成时标记点已加载，导致定位不准。
   • 解决：在onReady回调中再初始化标记点，或使用nextTick延迟更新数据。

5. 经纬度精度问题

   • 坐标值精度不足（如仅保留2位小数）可能导致缩放时像素级偏移。
   • 解决：确保经纬度保留至少6位小数。

示例代码修正：

onRegionChange(e) {
  if (e.type === 'end') {
    this.mapCtx.getCenter({
      success: (res) => {
        // 根据新中心点重新计算标记点坐标
        this.markers = this.updateMarkers(res.latitude, res.longitude);
      }
    });
  }
}