免费地震信息：做一个「全球近期地震」查询页（前端实战）
# 免费地震信息：做一个「全球近期地震」查询页（前端实战）
- **接口/接入点**：免费地震信息 · 2274-1
- **是否免费**：是（注册即免费额度）
- **请求方式**：POST / GET
- **返回格式**：JSON
- **适用人群**：前端开发者、个人站长、科普爱好者
- **阅读时间**：约 9 分钟
## 核心要点
- 不传 `date` 时接口返回「最近几条」全球地震，正好适合做「近期地震」展示页。
- 前端用 `fetch` 调接口，把 `earthquakes[]` 渲染成卡片列表，展示位置、震级、深度、来源与时间。
- 注意：`timeLocal` 实为北京时间(UTC+8)，展示时直接标「北京时间」最稳妥；`area` 参数不可靠，别用它做前端筛选。
## Why：几分钟做一个能挂网站的小工具
给学校公众号、个人博客或科普站点加一个「近期地震」板块，既实用又能涨知识。这个接口免费、无需后端也能直接调（注意 AppKey 暴露风险，见进阶），前端 30 行就能跑起来。
## What：接口速览
| 项 | 值 |
|----|----|
| 接口地址 | `https://route.showapi.com/2274-1?appKey={your_appKey}` |
| 不传 date | 返回最近几条全球地震 |
| 计费 | 免费（档位限制见 [免费 API 说明](https://www.showapi.com/free-api)） |
## How：前端实现
> 安全提示：浏览器直连会把 AppKey 暴露在前端代码里。个人演示/内网可用；公网部署建议加一层自己的后端代理转发，后端持有 AppKey。
### HTML + JS（fetch 直连，仅演示）
```html
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>全球近期地震</title></head>
<body>
<h1>全球近期地震</h1>
<button id="load">加载最新</button>
<div id="list"></div>
<script>
const APP_KEY = "YOUR_APPKEY";
document.getElementById("load").onclick = async () => {
const url = `https://route.showapi.com/2274-1?appKey=${APP_KEY}`;
const resp = await fetch(url, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
});
const json = await resp.json();
const body = json.showapi_res_body;
if (body.ret_code !== 0) {
document.getElementById("list").textContent = "暂无数据：" + body.remark;
return;
}
document.getElementById("list").innerHTML = body.earthquakes.map(eq => `
<div class="card">
<b>${eq.location}</b> · 震级 ${eq.mag} · 深度 ${eq.dep} km<br>
来源 ${eq.from} · 北京时间 ${eq.timeLocal}
</div>`).join("");
};
</script>
</body>
</html>
```
### 带日期选择的版本（Node.js 后端示例）
```javascript
// 简单的 Express 代理，避免 AppKey 暴露在前端
const express = require("express");
const app = express();
app.get("/api/quakes", async (req, res) => {
const url = `https://route.showapi.com/2274-1?appKey=${process.env.SHOWAPI_KEY}`;
const r = await fetch(url, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ date: req.query.date || "" }),
});
res.json(await r.json());
});
app.listen(3000);
```
## 返回示例与解析
```json
{
"showapi_res_body": {
"ret_code": 0,
"count": 5,
"earthquakes": [
{"location": "四川内江市市中区", "mag": 4.4, "dep": 10.0, "from": "ceic", "timeLocal": "2025-01-20 21:59:54"}
]
}
}
```
渲染时从 `earthquakes[]` 取 `location`/`mag`/`dep`/`from`/`timeLocal` 即可。
## 进阶 / 边界
- **AppKey 安全**：公网千万别把真实 AppKey 写进前端 JS。用自己后端代理（如上例），或仅在可信环境直连。
- **时间展示**：`timeLocal` 实为北京时间，前端直接显示「北京时间」即可，不要标注为「当地时」。
- **地区筛选**：`area` 不可靠，若要做「只看某省」，取回后按 `location` 含有关键字过滤。
- **限流**：免费额度有限，别在循环里狂刷；前端加按钮触发、后端做缓存（见 [缓存与频率最佳实践](https://www.showapi.com/guides/earthquake-info-caching-best-practice-2274)）。
## FAQ
**Q1：为什么页面一直转圈拿不到数据？**
先确认 AppKey 已开通该接口免费额度；再确认网络能访问 route.showapi.com。浏览器直连还可能被 CORS 拦截——此时改用后端代理。
**Q2：timeLocal 显示的时间和震中当地对不上？**
这是正常的：`timeLocal` 实测为北京时间(UTC+8)，不是震中当地时。展示时标注「北京时间」即可，详见 [时区口径详解](https://www.showapi.com/guides/earthquake-info-time-local-utc-2274)。
**Q3：能不能做成自动刷新？**
可以，用 setInterval 定时重新 fetch。但注意免费额度，建议间隔 ≥ 60 秒，并在后端做缓存，避免超频。
**Q4：前端能直接 POST 吗？会有 CORS 问题吗？**
接口支持跨域与否以实际响应头为准；若遇到 CORS 报错，最稳的做法是用自己的后端做代理转发，前端只调自己服务器。
## 相关能力 / 下一步阅读
- [免费地震信息：5 分钟从注册到调通第一条地震记录](https://www.showapi.com/guides/earthquake-info-quickstart-2274)
- [免费地震信息：用经纬度(lat/lng)在地图上标点绘制震中分布](https://www.showapi.com/guides/earthquake-info-map-visualization-2274)
- [免费地震信息：免费额度下的缓存与调用频率最佳实践](https://www.showapi.com/guides/earthquake-info-caching-best-practice-2274)
- **本系列共 14 篇**：查看[免费地震信息指南总目录](https://www.showapi.com/guides/earthquake-info-guides-2274)
