使用 JavaScript 构建实时澳大利亚紧急地图（免费 API）
发布: (2026年4月24日 GMT+8 12:01)
3 分钟阅读
原文: Dev.to
Source: Dev.to
概览
本教程展示如何使用 Leaflet.js 和免费 EmergencyAPI（汇集了澳大利亚八个州的实时紧急数据）构建澳大利亚实时紧急事件地图。
前置条件
- 一个 EmergencyAPI 密钥（免费；注册后验证邮箱并从仪表盘复制密钥）
- 基础的 HTML/JavaScript 知识
- 能够连接互联网以加载地图瓦片和 API 数据
项目结构
project/
├─ index.html
└─ app.jsindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Australian Emergency Map</title>
<style>
#map { height: 100vh; width: 100%; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="app.js"></script>
</body>
</html>app.js
const API_KEY = 'your_api_key_here';
const API_URL = 'https://emergencyapi.com/api/v1/incidents';
const map = L.map('map').setView([-28, 134], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const colours = {
bushfire: '#dc2626',
flood: '#2563eb',
storm: '#7c3aed',
rescue: '#f59e0b',
earthquake:'#92400e',
medical: '#10b981',
other: '#6b7280',
};
async function loadIncidents() {
const res = await fetch(API_URL, {
headers: { 'Authorization': `Bearer ${API_KEY}` }
});
const data = await res.json();
data.features.forEach(feature => {
const [lng, lat] = feature.geometry.coordinates;
const props = feature.properties;
const colour = colours[props.eventType] || colours.other;
L.circleMarker([lat, lng], {
radius: 6,
fillColor: colour,
color: '#fff',
weight: 1,
fillOpacity: 0.8
})
.bindPopup(`**${props.title}**
${props.eventType} | ${props.severity}`)
.addTo(map);
});
}
// Initial load
loadIncidents();
// Refresh every minute
setInterval(loadIncidents, 60000);运行地图
- 在 app.js 中将
'your_api_key_here'替换为从 EmergencyAPI 仪表盘获取的密钥。 - 在浏览器中打开
index.html。 - 地图将显示澳大利亚各地的活跃紧急事件，并按事件类型进行颜色编码。
可选：按州过滤
在 API URL 后追加查询字符串，例如：
const API_URL = 'https://emergencyapi.com/api/v1/incidents?state=nsw';免责声明
EmergencyAPI 汇集了澳大利亚政府官方紧急服务的数据。数据可能存在延迟或不完整。对于涉及安全的关键决策，请始终参考您所在州的紧急服务部门。