调用接口中心点，显示地图，前端引用腾讯地图，出现偏差解决

腾讯地图 API 默认初始化后，moveElement 的 transform 没有正确应用到 API 返回的中心点，导致需要手动拖动才能到达正确位置。

由于后端使用的是 百度地图 API，而前端使用的是 腾讯地图 API，你遇到的坐标偏移问题很可能是坐标系不匹配导致的。

问题分析

1. 百度地图 vs. 腾讯地图

• 百度地图 API 采用 BD09（百度坐标系）。
• 腾讯地图 API 采用 GCJ02（国测局火星坐标系）。
• 由于坐标系不同，百度坐标在腾讯地图上会有明显偏移（通常是偏北、偏东）。

2. 为什么移动后才能到达正确位置？

• 你的后端传的是 BD09（百度坐标），但腾讯地图 API 默认使用 GCJ02，所以坐标显示不对。
• 你手动拖动地图后，实际上是通过 panBy 让地图平移到了正确的位置，但本质问题是坐标转换不正确。

✅ 方法 1：使用腾讯地图 API 进行转换

腾讯地图 API 自带 坐标转换接口：

const convertBD09ToGCJ02 = (bd_lat, bd_lng) => {
  qq.maps.convertor.translate(new qq.maps.LatLng(bd_lat, bd_lng), 3, function (res) {
    if (res.length) {
      const gcj02LatLng = res[0]
      console.log('转换后的坐标:', gcj02LatLng)
      map.setCenter(gcj02LatLng) // 设为新中心
    }
  })
}

  const fetchCoordinates = async () => {
      try {
        const response = await axios.get(BASE_URL + API_URL + '/djt')

        if (response.data.data) {
          const { mapX: bdLng, mapY: bdLat, zoom: z } = response.data.data
          if (bdLng && bdLat) {
            const { lat, lng } = convertBaiduToTencent(Number(bdLat), Number(bdLng))
            mapX.value = lng
            mapY.value = lat
            zoom.value = z && Number(z) > 0 ? Number(z) : 13
          }
        }
      } catch (error) {
        console.error('获取坐标失败:', error)
      }
    }

✅ 方法 2：前端手写 BD09 → GCJ02 转换

const bd09ToGcj02 = (bd_lat, bd_lng) => {
  const x = bd_lng - 0.0065
  const y = bd_lat - 0.006
  const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI)
  const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * Math.PI)
  const gcj_lng = z * Math.cos(theta)
  const gcj_lat = z * Math.sin(theta)
  return { lat: gcj_lat, lng: gcj_lng }
}
const { lat, lng } = bd09ToGcj02(bd_lat, bd_lng)
map.setCenter(new qq.maps.LatLng(lat, lng)) // 设置地图中心