前端地图开发基础：服务类型、坐标系与 SDK 简介

2.2 GCJ-02：中国加密标准

• 全称：国家测绘局制定的火星坐标系
• 应用范围：国内互联网地图服务（高德、腾讯）
• 特点：基于 WGS84 加密偏移，防止泄密

加密算法（官方未公开，民间破解版）：

// WGS84 -> GCJ-02 近似转换
function wgs84ToGcj02(wgsLat, wgsLon) {
  const x = wgsLon - 0.0065;
  const y = wgsLat - 0.006;
  const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * Math.PI);
  const theta = Math.atan2(y, x) - 0.0003 * Math.cos(x * Math.PI);
  return {
    lat: z * Math.sin(theta),
    lon: z * Math.cos(theta)
  };
}

2.3 BD09：百度专属坐标系

• 全称：百度地图使用的二次加密坐标系
• 应用范围：百度地图、百度导航
• 特点：在 GCJ-02 基础上再次偏移

转换逻辑：

// GCJ-02 -> BD09
function gcj02ToBd09(gcjLat, gcjLon) {
  const x = gcjLon;
  const y = gcjLat;
  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);
  return {
    lat: z * Math.sin(theta) + 0.006,
    lon: z * Math.cos(theta) + 0.0065
  };
}

三、坐标系转换流程图

实际开发中，坐标转换通常遵循以下逻辑：

graph TD
    A[WGS84 原始坐标] --> B{是否在中国境内？}
    B -- 是 --> C[加密为 GCJ-02]
    B -- 否 --> D[保持 WGS84]
    C --> E{目标平台是百度？}
    D --> E
    E -- 是 --> F[二次加密为 BD09]
    E -- 否 --> G[保留 GCJ-02]
    F --> H[最终坐标]
    G --> H

四、主流地图 SDK 对比分析

五、10 大高频面试题 & 答案解析

面试官最爱问这些题，答不上来可能影响面试结果：

六、章节知识点总结表格

七、思维导图回顾

• 地图开发基础
  • 地图类型：矢量图、卫星图、地形图
  • 坐标系统：WGS84、GCJ-02、BD09
  • 转换逻辑：加密过程、解密方法
  • SDK 选型：高德、百度、腾讯、Google、Mapbox
  • 应用场景：出行导航、物流配送、数据可视化

八、算法步骤拆解：GeoHash 编码原理

这玩意儿听起来很牛逼，其实就是一个二分法的反复横跳！

Step 1：确定初始区间

• 经度范围：[-180°, 180°] → 分成左右两部分
• 纬度范围：[-90°, 90°] → 分成上下两部分

Step 2：逐位编码

以经度为例：

1. 若目标值位于左半区间，则记录 0
2. 若目标值位于右半区间，则记录 1
3. 更新区间范围，重复上述步骤直到达到指定精度

Step 3：交织合并

将经度和纬度的二进制串交替拼接，得到最终编码。

示例代码：

function encodeGeohash(lat, lon, precision = 12) {
  const BASE32 = '0123456789bcdefghjkmnpqrstuvwxyz';
  let minLat = -90, maxLat = 90;
  let minLon = -180, maxLon = 180;
  let geohash = '';
  let bits = [];

  for (let i = 0; i < precision * 5; i++) {
    if (i % 2 === 0) {
      const mid = (minLon + maxLon) / 2;
      if (lon > mid) {
        bits.push(1);
        minLon = mid;
      } else {
        bits.push(0);
        maxLon = mid;
      }
    } else {
      const mid = (minLat + maxLat) / 2;
      if (lat > mid) {
        bits.push(1);
        minLat = mid;
      } else {
        bits.push(0);
        maxLat = mid;
      }
    }
    if (bits.length === 5) {
      const index = parseInt(bits.join(''), 2);
      geohash += BASE32[index];
      bits = [];
    }
  }
  return geohash;
}

console.log(encodeGeohash(39.9042, 116.4074)); // 输出：wx4g0ec1

结语：地图世界的入口已为你打开

别怕起步晚，只要迈出了第一步，你就已经赢了大多数人。后续我们将深入具体的 SDK 接入实战，让你的地图梦想照进现实！