全球IP地址查询：如何用 lnt/lat 在地图上标点
# 全球IP地址查询：如何用 lnt/lat 在地图上标点
> 元信息：接口 全球IP地址查询（apiCode=20）· 返回字段 lnt/lat · 免费 · 适用人群 前端/全栈 · 阅读时间 6 分钟
## TL;DR 快速概览
- 返回里的 `lnt`(经度) 和 `lat`(纬度) 是字符串，先 `parseFloat` 再用于地图。
- 文档**未声明坐标系**（GCJ-02/WGS-84/BD-09 均未标注），坐标为 IP 库近似位置，适合大致标注。
- 用 Leaflet + 高德/OSM 瓦片即可在网页标点；若需贴合国内地图，先做坐标系转换。
## Why：拿到经纬度然后呢
拿到 `lnt`/`lat` 后，最常见的下一步是把访客/用户位置画到一张地图上：运营看地域分布、安全看异常聚集、产品做"附近"推荐。本文给一段可直接粘进项目的前端组件。
## What：字段与坐标系说明
| 字段 | 含义 | 类型 | 注意 |
|------|------|------|------|
| `lnt` | 经度 longitude | String | 需 `parseFloat` |
| `lat` | 纬度 latitude | String | 需 `parseFloat` |
**坐标系提示（重要）**：文档未声明 `lnt`/`lat` 采用哪种坐标系。国内地图（高德=GCJ-02、百度=BD-09）与 GPS（WGS-84）坐标系不同，直接混用会有几十到几百米偏移。由于文档未说明，本文示例用 OpenStreetMap（WGS-84 近似）做通用展示；若你的业务强依赖某家地图，请先做坐标转换再传入。
## How：在网页上标点（Leaflet 示例）
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>#map{height:400px}</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([39.9, 116.4], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
// 假设已从接口拿到 body
async function markIp(ip) {
const resp = await fetch(
`https://route.showapi.com/20-1?appKey=YOUR_APPKEY&ip=${ip}`
);
const data = await resp.json();
const body = data.showapi_res_body;
if (body.ret_code !== "0") return;
const lng = parseFloat(body.lnt);
const lat = parseFloat(body.lat);
L.marker([lat, lng])
.addTo(map)
.bindPopup(`${body.country} ${body.region} ${body.city} · ${body.isp}`);
map.setView([lat, lng], 8);
}
markIp("203.0.113.220");
</script>
</body>
</html>
```
## 返回示例与解析
接口返回 `lnt`/`lat` 为字符串：
```json
{ "showapi_res_body": { "lnt": "113.760234", "lat": "23.048884", "city": "东莞" } }
```
转换：`const lng = parseFloat(body.lnt), lat = parseFloat(body.lat);` —— 顺序别反（`lnt`=经度=x，`lat`=纬度=y）。
## 进阶 / 边界
- **批量打点**：同一张图上循环 `markIp` 即可；注意免费档位与缓存（见[免费档位指南](https://www.showapi.com/guides/ip-geo-free-tier-20)），相同 IP 不必重复请求。
- **坐标系转换**：高德地图需 GCJ-02，可在前端用现成转换库（WGS-84→GCJ-02）后再 `L.marker`；百度需 BD-09 二次转换。
- **精度预期**：IP 定位是"城市/片区级"近似，单点可能偏离实际位置数公里到数十公里，仅作区域判断，勿用于导航或精确定位个人。
## FAQ
**Q1：lnt 和 lat 哪个放前面？**
A：地图 API 通常是 `[纬度, 经度]`（lat, lng）。`lnt` 是经度、`lat` 是纬度，别写反，否则标点会跑到错误海域。
**Q2：为什么标点偏了几公里？**
A：IP 定位本身是近似，且文档未声明坐标系；若叠加了与地图不匹配的坐标系，偏移会更明显。做区域展示足够，精确位置请换 GPS 方案。
**Q3：返回的坐标是 WGS-84 吗？**
A：文档未声明坐标系，不能确认是 WGS-84。示例中按通用 WGS-84 近似展示；接入具体地图服务前请先做坐标系确认/转换。
**Q4：20/2 域名查询也有 lnt/lat 吗？**
A：有，20/2 返回同样含 `lnt`/`lat`（见[域名查询接入点详解](https://www.showapi.com/guides/ip-geo-domain-query-20)），标点方式相同。
## 相关能力 / 下一步阅读
- [全球IP地址查询：返回字段全解](https://www.showapi.com/guides/ip-geo-response-fields-20) — 字段含义总表
- [网络安全场景：用 IP 归属地识别异常登录与欺诈风险](https://www.showapi.com/guides/ip-geo-fraud-security-20) — 落地风控
- [全球IP地址查询：免费档位与积分兑换](https://www.showapi.com/guides/ip-geo-free-tier-20) — 批量标注省调用
- **本系列共 10 篇**：查看[全球IP地址查询指南总目录](https://www.showapi.com/guides/ip-geo-guides-20)
