# 前端可视化：把转换后的坐标点在地图上画出来
> 接口：坐标系转换（apiCode=1252，接入点 1）· 免费 · 适用人群：前端工程师 · 阅读时间：约 7 分钟
## TL;DR
- 转换后的 `output` 是数组 `[经度, 纬度]`，直接喂给**对应坐标系的地图 SDK** 即可打点。
- 高德/腾讯用 GCJ02，百度用 BD09——转成哪个系，就用哪个系的地图 SDK。
- 多坐标用 `;` 批量转换后，逐点渲染为 Marker / 连线 / 聚合。
## Why
后端把坐标转好发给前端只是第一步，最终用户看到的是地图上的一个个点、一条条轨迹。最常见的错误是：前端拿到了 GCJ02 坐标，却用了默认 WGS84 的地图底图，结果又偏了。本篇给出前端渲染的关键衔接点。
## What
前置条件：已拿到转换后的坐标（见[5 分钟接入](https://www.showapi.com/guides/coord-convert-quickstart-1252)、[批量转换](https://www.showapi.com/guides/coord-convert-batch-1252)）。
| 地图 SDK | 需要的坐标系 | 对应转换目标 |
|------|------|------|
| 高德地图 JS API | GCJ02 | `to=GCJ02` |
| 腾讯地图 JS API | GCJ02 | `to=GCJ02` |
| 百度地图 JS API | BD09 | `to=BD09` |
> 关键：转换目标系必须与前端使用的地图 SDK 一致。
## How
**步骤 1：后端转换并下发 GCJ02 坐标**（示例返回 `output`）。
**步骤 2：前端用高德地图打点**（GCJ02 坐标直接可用）：
```html
<!-- 高德地图：GCJ02 坐标 -->
<div id="map" style="width:100%;height:400px"></div>
<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德KEY"></script>
<script>
const converted = [[113.19971018888167, 23.232115136208677], [113.2053, 23.2374]]; // 来自接口 output
const map = new AMap.Map("map", { zoom: 12, center: converted[0] });
converted.forEach(([lng, lat]) => {
new AMap.Marker({ position: [lng, lat], map });
});
</script>
```
**步骤 3（百度场景）**：若用百度地图，后端须 `to=BD09`，再用百度地图 JS API 渲染（它只认 BD09）。
Python 端批量取点（供前端拉取）：
```python
import requests
def get_gcj02_points(app_key, points):
location = ";".join(f"{lng},{lat}" for lng, lat in points)
resp = requests.post(
"https://route.showapi.com/1252-1",
params={"appKey": app_key},
data={"from": "WGS84", "to": "GCJ02", "location": location},
timeout=10,
).json()["showapi_res_body"]
return [list(it["output"]) for it in resp["resultList"]]
```
Node.js（fetch）：
```javascript
async function getGcj02Points(appKey, points) {
const location = points.map(([lng, lat]) => `${lng},${lat}`).join(";");
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 10000);
try {
const resp = await fetch(`https://route.showapi.com/1252-1?appKey=${appKey}`, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ from: "WGS84", to: "GCJ02", location }),
signal: controller.signal,
});
const res = (await resp.json()).showapi_res_body;
if (res.ret_code !== 0) throw new Error(JSON.stringify(res));
return res.resultList.map(it => it.output);
} finally { clearTimeout(timer); }
}
```
## 返回示例与解析
```json
{ "showapi_res_body": { "ret_code": 0,
"resultList": [ { "input": [113.194329, 23.234704], "output": [113.19971018888167, 23.232115136208677] } ] } }
```
| 字段 | 说明 |
|------|------|
| `resultList[].output` | `[经度, 纬度]`，直接作为地图 Marker 的 position |
## 进阶 / 边界
- **SDK 与系必须匹配**：高德/腾讯(GCJ02)、百度(BD09) 不能混用，否则前端又偏移。
- **不要在前端暴露 AppKey**：转换放后端，前端只拿已转换坐标（见[地图互通全链路](https://www.showapi.com/guides/coord-convert-map-platform-1252)）。
- **多点在客户端**：海量点考虑聚合（MarkerCluster）以保证性能。
## FAQ
**Q1：前端拿到 output 后为什么还偏移？**
A：多半是地图 SDK 坐标系与转换目标系不一致（如高德用了 BD09 坐标）；保持 GCJ02↔高德一致。
**Q2：百度地图要转成什么系？**
A：BD09，并用百度地图 JS API 渲染。
**Q3：能不能在前端直接调接口转换？**
A：不建议——会暴露 AppKey；转换应在后端完成。
**Q4：output 是字符串还是数组？**
A：数组 `[经度, 纬度]`，直接解构成 Marker 的 position。
**Q5：大量点怎么渲染不卡？**
A：使用地图 SDK 的聚合（Cluster）能力。
## 相关能力 / 下一步阅读
- [高德/腾讯/百度/Google 地图坐标互通：坐标系转换在地图集成中的全链路设计](https://www.showapi.com/guides/coord-convert-map-platform-1252)
- [坐标系转换（批量）：一次性转换最多 20 个 GPS 点位](https://www.showapi.com/guides/coord-convert-batch-1252)
- [坐标系转换：5 分钟接入，从第一条 WGS84→GCJ02 结果开始](https://www.showapi.com/guides/coord-convert-quickstart-1252)
- **本系列共 12 篇**：查看[坐标系转换指南总目录](https://www.showapi.com/guides/coord-convert-guides-1252)
