前端地图开发核心概念：坐标系、SDK与GeoHash实践

// 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
  };
}

实际工作时，判断一下坐标是否在国内，再决定加密到 GCJ-02 还是保留 WGS84，如果目标平台是百度，就再加一层 BD09。流程用图表示：

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

顺便提一下 WGS84 转笛卡尔（ECEF），有时做三维渲染会用到：

// WGS84 经纬度转笛卡尔坐标（ECEF）
function wgs84ToEcef(lat, lon, alt = 0) {
  const a = 6378137; // 长半轴
  const b = 6356752.3142; // 短半轴
  const e2 = (a * a - b * b) / (a * a);
  const N = a / Math.sqrt(1 - e2 * Math.sin(lat) ** 2);
  return {
    x: (N + alt) * Math.cos(lat) * Math.cos(lon),
    y: (N + alt) * Math.cos(lat) * Math.sin(lon),
    z: ((b * b) / (a * a) * N + alt) * Math.sin(lat)
  };
}

主流地图 SDK 对比

选型时主要看业务范围、免费额度和生态。国内项目首选高德，文档齐全，每日免费调用量 15 万次，O2O、物流、出行都能接。百度地图 POI 数据丰富，AI 能力强，适合 LBS 搜索和导航。腾讯地图优势在微信生态集成，接口也算稳定。做海外业务直接上 Google Maps，每月有 200 美元免费额度，全球覆盖没得挑。如果要高度自定义、数据可视化，Mapbox GL JS 灵活到爆，不过免费额度只有每月 5 万次。

面试常见问题

面试里地图相关的问题其实就那几样：

• Web Mercator 投影：其实就是俗称的'3887'，保证角度不变形，但越往两极面积失真越夸张，网上地图全是它。
• 坐标系偏移怎么处理：要么用 coordtransform.js 这种库做前端转换，要么调服务端 API 批量转，关键是搞清楚原始数据到底是哪个坐标系。
• GeoJSON：地理空间数据的交换格式，点就是 {"type": "Point", "coordinates": [116.4, 39.9]}，简单但够用。
• 地图瓦片：把世界切成无数张 256x256 小图片，按层级加载，Web 端一般用 XYZ 规范（Y 轴向上），TMS 是反的。
• 移动端渲染用 Canvas 而非 SVG：性能，Canvas 处理海量动态图形更扛得住。
• 海量标记点优化：MarkerClusterer 聚合，或者干脆把点都打到 Canvas 上。
• SDK 初始化失败：密钥、CSP、容器没挂载、HTTPS 缺失，都是经典坑。
• GeoHash 编码：把二维坐标转成一维字符串，前缀匹配就能查附近，附近搜索的效率利器。
• 防止密钥被盗：Referer 白名单、签名验证、轮换密钥，就算泄露也能及时止损。

GeoHash 是怎么编的

GeoHash 原理不复杂，就是反复二分区间。经度从 [-180, 180] 开始，纬度从 [-90, 90] 开始，目标值落入哪一半就记 0 或 1，然后交替编织经纬度的二进制位，转成 base32 字符串。精度取决于位数。

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

搞懂这些，不管后面接高德还是 Mapbox，心里都有底。