免费地震信息：用经纬度(lat/lng)在地图上标点绘制震中分布
# 免费地震信息：用经纬度(lat/lng)在地图上标点绘制震中分布
- **接口/接入点**：免费地震信息 · 2274-1
- **是否免费**：是（注册即免费额度）
- **请求方式**：POST / GET
- **返回格式**：JSON
- **适用人群**：前端开发者、数据分析师、科普运营
- **阅读时间**：约 8 分钟
## 核心要点
- 每条地震带 `lat`（纬度）和 `lng`（经度）十进制字段，可直接用于地图标点。
- 坐标系为 WGS84 十进制经纬度（文档未明示，实测符合 WGS84），主流地图 SDK 默认可直接消费。
- 结合 `mag` 用圆点大小/颜色表示震级，即可生成直观的「震中分布图」。
## Why：一图胜千言
列出一堆地名和数字很难让人直观感受地震分布。把震中打到地图上、用颜色区分震级，科普效果和数据分析价值立刻提升——这也最适合用本接口返回的经纬度字段。
## What：接口速览
| 项 | 值 |
|----|----|
| 接口地址 | `https://route.showapi.com/2274-1?appKey={your_appKey}` |
| 经纬度字段 | `lat`（纬度）、`lng`（经度），十进制 |
| 坐标系 | WGS84（文档未明示，按实测使用；若接入国内地图如对精度有要求请先做坐标转换核对） |
| 计费 | 免费（档位限制见 [免费 API 说明](https://www.showapi.com/free-api)） |
## How：地图标点（Leaflet 示例）
下面用开源 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></head>
<body>
<div id="map" style="height:500px"></div>
<script>
const map = L.map("map").setView([30, 105], 3);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);
const APP_KEY = "YOUR_APPKEY";
async function draw(date) {
const url = `https://route.showapi.com/2274-1?appKey=${APP_KEY}`;
const r = await fetch(url, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ date }),
});
const body = (await r.json()).showapi_res_body;
(body.earthquakes || []).forEach(eq => {
L.circleMarker([eq.lat, eq.lng], {
radius: 3 + eq.mag * 2,
color: eq.mag >= 5 ? "red" : "orange",
}).addTo(map).bindPopup(`${eq.location}<br>震级 ${eq.mag} · 深度 ${eq.dep}km`);
});
}
draw("20250120");
</script></body></html>
```
## 返回示例与解析
```json
{ "showapi_res_body": { "ret_code": 0, "count": 1,
"earthquakes": [ { "lat": 23.23, "lng": 120.47, "mag": 6, "dep": 10, "location": "台湾玉井北12 公里处" } ] } }
```
`lat`/`lng` 即标点坐标；`mag` 用于决定圆点大小/颜色。
## 进阶 / 边界
- **坐标系确认**：文档未声明坐标系，实测经纬度为十进制 WGS84。若叠加到高德/百度等采用 GCJ-02/BD-09 的国内地图且对位置精度敏感，需先做坐标转换并核对偏差，不要直接假设。
- **批量标点频率**：免费额度有限，不要在循环里逐条单独请求；一次取回当日全部记录后本地渲染。
- **地区筛选**：`area` 不可靠，要「只画某省」请在客户端按 `location` 过滤后再标点。
- 更多字段口径见 [返回字段全解](https://www.showapi.com/guides/earthquake-info-response-fields-2274)。
## FAQ
**Q1：经纬度能直接用在百度/高德地图吗？**
接口返回的是 WGS84 十进制经纬度。Leaflet + OSM 默认可直接用；高德/百度采用 GCJ-02/BD-09，直接打点会有偏移，需做坐标转换后使用。
**Q2：圆点大小怎么定合理？**
可用线性映射，如 `radius = 3 + mag * 2`（震级越大圆越大），并对 mag≥5 用红色强调。具体阈值按你的数据分布调整。
**Q3：如何只显示某省地震？**
取回 `earthquakes[]` 后，按 `location` 是否包含目标省名关键字过滤，再标点。不要依赖 `area` 参数（实测未按省名过滤）。
**Q4：一次能标多少点？会不会超频？**
一次请求返回当日全部记录，本地渲染不受限。注意免费额度，按日取数即可，别高频重复请求。
## 相关能力 / 下一步阅读
- [免费地震信息：返回字段全解（ret_code / mag / from 一文读懂）](https://www.showapi.com/guides/earthquake-info-response-fields-2274)
- [免费地震信息：date 与 area 参数使用指南（含实测筛选坑）](https://www.showapi.com/guides/earthquake-info-params-guide-2274)
- [免费地震信息：做一个「全球近期地震」查询页（前端实战）](https://www.showapi.com/guides/earthquake-info-recent-quakes-app-2274)
- **本系列共 14 篇**：查看[免费地震信息指南总目录](https://www.showapi.com/guides/earthquake-info-guides-2274)
