## 一、背景与创意
城市灾害发生时，传统应急疏散方案面临三大核心痛点：**纸质地图信息滞后，无法反映实时路况**；**单一导航策略，遇拥堵即瘫痪**；**静态数字化预案缺乏灵活性，无法应对灾害演化**。

在真实灾害场景中，应急指挥人员需要在极短时间内做出判断：灾害点周边有哪些可用资源？不同疏散路线的风险差异是什么？多个目标优先级如何排序？这往往需要调取地图、联系多个部门、查阅历史数据，耗时数十分钟。

本项目的设计理念是将这一流程压缩到 30 秒内：**地图层负责精确的地理计算和路径规划，AI 层负责综合研判与建议生成，两者各司其职、深度互补**。系统围绕三个核心动作展开——设定灾害点与影响范围，系统自动搜索周边应急资源、同步规划多条策略不同的疏散路线、AI 实时生成专业疏散建议报告。

---

## 二、技术架构

```
用户交互层（灾害设定 / 地图操作 / 结果展示）
       ↓
业务逻辑层（危险区建模 → POI搜索 → 路线规划 → AI报告）
       ↓
腾讯地图能力层（JS API v2 / POI搜索 / 路线规划 / 地理编码）
       ↓
AI 能力层（DeepSeek / 通义千问）
```

**技术栈**：HTML5 + CSS3 + 原生 JavaScript + 腾讯地图 JS API v2（`qq.maps`）+ WebService API + 大模型 API。零框架、零后端依赖，任意 HTTP 服务器即可运行。

---

## 三、核心功能实现
### 3.1 地图初始化与危险点标记

腾讯地图 JS API v2 内部使用 `document.write()` 加载子模块，**不能动态创建 `<script>` 标签**，必须用同步 `<script src="">` 加载：

```html

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
<script src="js/app.js"></script>
```

危险点标记 + 真实地理覆盖范围的圆圈：

```javascript
S.dangerMarker = new qq.maps.Marker({
  position: new qq.maps.LatLng(lat, lng),
  map: S.map,
});

var radius = parseInt($('#radius-slider').value, 10);
S.dangerCircle = new qq.maps.Circle({
  map: S.map,
  center: new qq.maps.LatLng(lat, lng),
  radius: radius,  // 以米为单位，对应真实地理覆盖范围
  fillColor: new qq.maps.Color(239, 68, 68, 0.18),
  strokeColor: '#ef4444',
  strokeWeight: 2,
});
```

### 3.2 周边资源 POI 搜索

使用 WebService API（JSONP 方式，无需后端代理），按类型并发搜索：

```javascript
function searchNearbyPOIs(lat, lng) {
  var keywords = [];
  if ($('#cb-hospital').checked) keywords.push('医院');
  if ($('#cb-fire').checked)    keywords.push('消防站');
  if ($('#cb-shelter').checked) keywords.push('避难场所');
  if ($('#cb-police').checked)  keywords.push('派出所');
  if ($('#cb-school').checked)  keywords.push('学校');

  keywords.forEach(function (kw) {
    var cb = 'poi_cb_' + Math.random().toString(36).slice(2, 10);
    window[cb] = function (res) {
      if (res && res.status === 0 && res.data) {
        res.data.forEach(function (item) {
          S.pois.push({
            name: item.name,
            address: item.address || '',
            latLng: { lat: item.location.lat, lng: item.location.lng },
            type: kw
          });
        });
      }
    };
    var s = document.createElement('script');
    s.src = 'https://apis.map.qq.com/ws/place/v1/search'
      + '?keyword=' + encodeURIComponent(kw)
      + '&boundary=nearby(' + lat + ',' + lng + ',3000)'
      + '&key=YOUR_KEY&output=jsonp&callback=' + cb;
    document.head.appendChild(s);
  });
}
```

POI 标记按类型自动区分颜色：

| 类型 | 颜色 | 图标 |
|------|------|------|
| 医院 | `#ef4444` 红色 | 🏥 |
| 消防站 | `#f97316` 橙色 | 🚒 |
| 避难场所 | `#22c55e` 绿色 | 🏠 |
| 派出所 | `#3b82f6` 蓝色 | 🚔 |
| 学校 | `#a855f7` 紫色 | 🏫 |

### 3.3 多策略路线规划

同时规划三条策略不同的疏散路线，颜色区分优先级：

```javascript
var strategies = [
  { key: 'LEAST_TIME',       label: '最快路线',   color: '#22c55e', priority: 'safe'    },
  { key: 'SHORTEST_DISTANCE', label: '最短路线',   color: '#eab308', priority: 'caution' },
  { key: 'REAL_TRAFFIC',    label: '高风险路线', color: '#ef4444', priority: 'danger'  },
];

strategies.forEach(function (s) {
  var cb = 'route_cb_' + Math.random().toString(36).slice(2, 10);
  window[cb] = function (res) {
    if (res && res.status === 0 && res.result && res.result.routes) {
      var route = res.result.routes[0];
      var coords = decodePolyline(route.polyline);  // polyline 是编码字符串，必须解码
      drawRoute({ label: s.label, color: s.color, coords: coords });
    }
  };
  var s = document.createElement('script');
  s.src = 'https://apis.map.qq.com/ws/direction/v1/driving/'
    + '?from=' + slat + ',' + slng + '&to=' + dlat + ',' + dlng
    + '&policy=' + s.key + '&key=YOUR_KEY&output=jsonp&callback=' + cb;
  document.head.appendChild(s);
});
```

### 3.4 AI 应急疏散建议报告

AI 不是替代地图，而是做综合判断：

```javascript
var prompt = `你是一位城市应急管理专家。请根据以下信息生成"城市灾害应急疏散指挥建议报告"：
- 灾害类型：${disaster}，影响半径：${radius}米
- 周边安全资源点：${poiCount}个
- 已规划疏散路线：${routeInfo || '暂无'}

报告要求：
1. Markdown 格式输出
2. 包含：灾害评估、疏散策略建议、路线风险评估、资源利用建议、注意事项
3. 500-800 字，专业简洁，适合应急指挥人员`;

var response = await fetch('https://api.deepseek.com/chat/completions', {
  method: 'POST',
  headers: { 'Authorization': 'Bearer ' + apiKey, 'Content-Type': 'application/json' },
  body: JSON.stringify({
    model: 'deepseek-chat',
    messages: [{ role: 'user', content: prompt }],
    temperature: 0.3,  // 低温保证输出稳定
  }),
});
```

---

## 四、关键技术难点

### 难点 1：腾讯地图 JS API 的 document.write 问题

动态创建 `<script>` 标签时，腾讯地图内部 `document.write()` 报错：

```
Failed to execute 'write' on 'Document': It isn't possible to write
into a document from an asynchronously-loaded external script
```

**解决**：改用同步 `<script src="">` 标签，直接放在 HTML 中，不动态注入。

### 难点 2：Polyline 是编码字符串

路线规划 API 返回的 `polyline` 类似 `eh~cF~u~cVq@`，不是坐标数组，直接传给 Polyline 组件会报错。

**解决**：实现 `decodePolyline()` 函数，类似 Google Polyline Algorithm：

```javascript
function decodePolyline(encoded) {
  var len = encoded.length, index = 0, lat = 0, lng = 0, result = [];
  while (index < len) {
    var b, shift = 0, d = 0;
    do { b = encoded.charCodeAt(index++) - 63; d |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20);
    lat += ((d & 1) ? ~(d >> 1) : (d >> 1));
    shift = 0; d = 0;
    do { b = encoded.charCodeAt(index++) - 63; d |= (b & 0x1f) << shift; shift += 5; } while (b >= 0x20);
    lng += ((d & 1) ? ~(d >> 1) : (d >> 1));
    result.push(new qq.maps.LatLng(lat / 1000000, lng / 1000000));
  }
  return result;
}
```

### 难点 3：file:// 协议无法加载地图

直接双击 HTML 文件（`file://` 协议）地图无法加载。

**解决**：启动本地 HTTP 服务器：

```bash
python -m http.server 3000
# 访问 http://localhost:3000/evac-planner/
```

---

## 五、运行效果

以下展示项目实际运行的四个关键场景，每张截图对应一个核心功能节点：

###  地图正常加载

启动本地 HTTP 服务器后访问  `http://localhost:3000`，通过浏览器访问项目地址，腾讯地图完整渲染，左侧为交互地图区域，右侧为功能控制面板。

![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11941136/7ad904be0b77c24e6b8422ef4d22b7b9.png)
###  定位标记危险点和周边资源搜索

输入「天心阁」→ 点「定位」→ 地图出现红色危险区域圆圈。
右侧面板「周边资源分布」显示各类型 POI 数量，地图上彩色标记。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11941136/926c4f92f0369090d2ed43d75b1ef2ed.png)
### 疏散路线规划
同时会标记好路线在地图上显示。后续要增加在右侧路线卡片中点击「🚶 导航到此处」，跳转腾讯地图 App 打开详细导航。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11941136/d6d196248782e001e3750486c61a1f15.png)
### AI 应急疏散建议报告

在界面底部填入 DeepSeek API Key（或通义千问 Key），点击"生成应急疏散建议报告"按钮。系统汇总当前灾害信息、资源分布和路线规划结果构造 Prompt，调用大模型 API 生成报告，并实时渲染到右侧面板中。报告以txt格式呈现，包含风险评估、策略建议和资源调度方案等专业内容。
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11941136/9798a5ab0c56d5f6a1beeba3ea28b5fe.png)
![在这里插入图片描述](https://developer.qcloudimg.com/http-save/yehe-11941136/fb0135e538cd01dad9aebd465c61a27e.png)

---
## 六、总结与展望

本项目完整实现了从地图选点到 AI 报告的端到端应急疏散规划流程，深度整合了腾讯地图的多个核心能力——地图渲染、地理编码、POI 搜索和路线规划——并在此基础上叠加了大模型的专业研判能力。系统的核心价值在于将原本割裂的地图工具与应急知识进行有机融合，让指挥人员在灾害发生的第一时间就能获得**空间可视化 + 决策建议**的一体化支持。

未来的扩展方向主要集中在以下几个维度：**实时路况接入**可以让路线拥堵评估更准确；**微信小程序版**可以将能力延伸到移动端，让疏散人员也能使用；**历史案例库**的建立可以为未来训练专用应急模型积累数据；**多人协作标注**功能则能支持多方同时感知灾情，提高协同响应效率。
| 方向 | 说明 |
|------|------|
| 实时路况接入 | 让路线拥堵评估更准确 |
| 微信小程序版 | 提升移动端应急可用性 |
| 历史案例库 | 积累数据训练专属应急模型 |
| 多人协作标注 | 支持多方同步险情感知 |

城市灾害发生时，传统应急疏散方案面临三大核心痛点：纸质地图信息滞后，无法反映实时路况；单一导航策略，遇拥堵即瘫痪；静态数字化预案缺乏灵活性，无法应对灾害演化。

【腾讯位置服务开发者征文大赛】当 AI 遇上城市应急：用腾讯地图 + 大模型打造智能疏散规划器

人工智能

智能应急疏散系统整合腾讯地图与大模型AI，30秒生成灾害响应方案。实时搜索周边医院、消防站等资源，智能规划多策略疏散路线，AI自动生成专业应急报告。解决传统纸质地图滞后、导航单一、预案僵化三大痛点，提升城市灾害应对效率。

服务器

HTML5

JSON

2026采购季 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

【腾讯位置服务开发者征文大赛】当 AI 遇上城市应急：用腾讯地图 + 大模型打造智能疏散规划器-腾讯云开发者社区-腾讯云

【腾讯位置服务开发者征文大赛】当 AI 遇上城市应急：用腾讯地图 + 大模型打造智能疏散规划器

【腾讯位置服务开发者征文大赛】当 AI 遇上城市应急：用腾讯地图 + 大模型打造智能疏散规划器

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐