> 适用场景：自驾 / 长途出行类 App、小程序，在地图上展示从起点到终点沿途经过各城市的实时天气与气象预警。
>
> 核心技术链路：**腾讯地图驾车路线规划（拿到途经城市 adcode）→ 请求多城市天气接口（批量查询天气）**。

![pic_1020.jpg](https://developer.qcloudimg.com/http-save/yehe-8626216/226776d8ed9f3f9256cfa019b74c0ef2.jpg)
---

## 需求背景

用户在规划自驾路线时，往往不只关心到达时间，还关心「这一路上会不会遇到雨、雪、大雾或气象预警」。典型需求：

- 输入起点、终点（可附带途经点），在地图上画出驾车路线；
- 自动识别路线**途经的省 / 市 / 区县**；
- 批量拉取这些城市的实况天气、温度、风向、空气质量与气象预警；
- 在路线沿途以 Marker 或列表形式展示。


## 整体实现思路

```mermaid
flowchart LR
    A[前端: 起点/终点/途经点] --> B[自有后端代理]
    B --> C[腾讯地图 driving 路线规划 API]
    C -->|routes[].cities[].adcode 6位| B
    B -->|6位 adcode 组合透传| D[citypath 沿途天气 API]
    D -->|list: 天气/温度/预警| B
    B -->|聚合结果| A
```

核心三步：

1. **取城市**：调用腾讯地图 driving 接口，解析 `result.routes[].cities[]`，得到途经城市 6 位 `adcode`；
2. **去重限流**：对途经城市 6 位 `adcode` 去重并限制数量（天气接口单次最多 100 个）；
3. **查天气**：用 6 位 `adcode` 批量请求天气接口，渲染结果。

> 安全要点：两个接口的密钥（腾讯 `key`、天气 `appid/appsecret`）都**只能放在服务端**，前端通过调用「自有后端」间接获取结果，绝不可在前端硬编码或直连第三方接口。

---

## 四、Step 1：获取途经城市 adcode（腾讯地图 driving）

### 4.1 接口说明

- 请求地址：`https://apis.map.qq.com/ws/direction/v1/driving/`
- 请求方式：GET
- 必需参数：

| 参数 | 说明 |
| --- | --- |
| `key` | 腾讯位置服务服务端 Key（需在控制台为 Key 开启 WebServiceAPI 配额） |
| `from` | 起点坐标，**纬度在前、经度在后**，如 `39.915285,116.403857` |
| `to` | 终点坐标，格式同上 |
| `waypoints` | 途经点，可选，`lat,lng;lat,lng`，最多 30 个 |
| `added_fields` | 传 `cities`，确保返回途经行政区划 |
| `output` | `json` |

### 4.2 响应结构（关键字段）

```
status / message
result
└── routes[]                 // 路线方案（get_mp=1 时最多 3 条）
    ├── distance            // 总距离（米）
    ├── duration            // 预计耗时（分钟）
    ├── cities[]            // ★ 途经行政区划，按经过顺序排列
    │   └── adcode          // 6 位行政区划代码，如 110101
    └── steps[]             // 逐段导航（不含城市编码）
```

示例（节选）：

```json
{
  "status": 0,
  "message": "query ok",
  "result": {
    "routes": [
      {
        "distance": 263178,
        "duration": 277,
        "cities": [
          { "adcode": 110101 },
          { "adcode": 131000 },
          { "adcode": 130400 }
        ],
        "steps": [ { "instruction": "沿东华门大街向西行驶..." } ]
      }
    ]
  }
}
```
---

## 五、Step 2：adcode 编码对齐（两侧均为 6 位，直接透传）

腾讯地图返回的 `adcode` 与天气接口的 `adcode` **同为 6 位国家标准码（GB/T 2260）**，例如腾讯 `130400`（邯郸市）对应天气接口 `130400`，可直接透传，无需任何编码转换或补零。

请求示例：

```
adcode=130400,230800
```

> 实践建议：由于两侧编码体系一致，开发时只需对 `cities` 列表做**去重**即可直接拼接到天气请求中。若你的账号套餐版本接口文档要求 12 位编码（早期版本曾出现），再按需将 6 位补零为 12 位（`code.padEnd(12,'0')`）；当前主流版本均为 6 位，直接透传即可。
---

## 六、Step 3：调用沿途天气接口

### 6.1 接口说明

- 请求地址（服务端线路）：`https://pddfps.tianqiapi.com/free/citypath`
- 请求方式：GET
- 必需参数：

| 参数 | 必填 | 说明 |
| --- | --- | --- |
| `appid` | 是 | 平台分配的 appid |
| `appsecret` | 是 | 平台密钥，**禁止暴露到前端** |
| `adcode` | 否 | 6 位区划编码，逗号分隔，**最多 100 个城市**，如 `130400,230800` |
| `cityid` | 否 | 10 位城市 ID，逗号分隔，最多 100 个；与 `adcode` 二选一，`cityid` 优先级更高 |


### 6.2 响应结构

```json
{
  "nums": 35,
  "list": [
    {
      "adcode": "130406",
      "city": "峰峰",
      "uptime": "16:17",
      "lat": "39.52",
      "lon": "116.71",
      "wea": "多云",
      "wea_img": "yun",
      "tem": "19.5",
      "win": "东南风 2级",
      "air": "64",
      "alarm": [
        { "type": "大风", "level": "蓝色", "title": "河北省发布大风蓝色预警" }
      ]
    }
  ]
}
```

### 6.3 字段含义与处理要点

| 字段 | 含义 | 处理建议 |
| --- | --- | --- |
| `adcode` | 区划编码 | 与路线接口的 adcode 对应，用于关联 Marker |
| `city` | 城市 / 区县名 | 作为 Marker 标签与弹窗标题 |
| `wea` | 实况天气文字 | 直接展示 |
| `wea_img` | 天气图标标识 | 见下方映射表，前端据此切换图标 |
| `tem` | 实时温度（℃） | **注意是字符串**，展示前无需二次转换 |
| `win` | 风向 + 风力 | 直接展示 |
| `air` | AQI 数值 | 需自行分级着色（优 / 良 / 轻度污染…） |
| `alarm` | 预警数组 | **可能为空数组，也可能多条**，需判空后遍历 |
| `lat` / `lon` | 区县中心点坐标 | 注意**纬度在前、经度在后** |

天气图标映射（`wea_img` → 文案 / 图标文件）：

| wea_img | 含义 |
| --- | --- |
| `qing` | 晴 |
| `yun` | 多云 |
| `yin` | 阴 |
| `yu` | 雨 |
| `xue` | 雪 |
| `wu` | 雾 |
| `lei` | 雷 |
| `shachen` | 沙尘 |

空气质量分级（前端着色参考）：

```js
function airLevel(aqi) {
  aqi = Number(aqi);
  if (aqi <= 50)  return { label: '优',       color: '#00e400' };
  if (aqi <= 100) return { label: '良',       color: '#ffde33' };
  if (aqi <= 150) return { label: '轻度污染', color: '#ff9933' };
  if (aqi <= 200) return { label: '中度污染', color: '#cc0033' };
  if (aqi <= 300) return { label: '重度污染', color: '#660099' };
  return { label: '严重污染', color: '#7e0023' };
}
```

---

## 七、完整后端代理示例（Node + Express）

把「密钥安全」「编码转换」「去重限流」统一收敛到服务端，前端只调自有接口。

```js
// server.js
const express = require('express');
const axios = require('axios');
require('dotenv').config();

const app = express();
app.use(express.json());

const TENCENT_KEY   = process.env.TENCENT_KEY;   // 腾讯服务端 Key
const TQ_APPID      = process.env.TQ_APPID;      // 天气接口 appid
const TQ_APPSECRET  = process.env.TQ_APPSECRET;  // 天气接口 appsecret

const DIR_URL   = 'https://apis.map.qq.com/ws/direction/v1/driving/';
const WX_URL    = 'https://pddfps.tianqiapi.com/free/citypath';

app.get('/api/route-weather', async (req, res) => {
  try {
    const { from, to, waypoints } = req.query;
    if (!from || !to) {
      return res.status(400).json({ error: '缺少 from / to 参数' });
    }

    // 1) 腾讯地图驾车路线规划
    const dirParams = { key: TENCENT_KEY, from, to, added_fields: 'cities', output: 'json' };
    if (waypoints) dirParams.waypoints = waypoints;

    const dirRes = await axios.get(DIR_URL, { params: dirParams });
    const routes = dirRes.data.result?.routes || [];
    if (!routes.length) return res.status(502).json({ error: '路线规划失败', detail: dirRes.data });

    // 2) 提取途经城市 adcode（6位），去重
    const adcodeSet = new Set();
    routes.forEach((r) => (r.cities || []).forEach((c) => {
      if (c.adcode) adcodeSet.add(String(c.adcode));
    }));

    // 3) 两侧均为 6 位 adcode，直接透传并限制最多 50 个城市
    const adcodes = [...adcodeSet].slice(0, 50);
    if (!adcodes.length) return res.json({ route: routes[0], weather: { list: [] } });

    // 4) 调用沿途天气接口
    const wxRes = await axios.get(WX_URL, {
      params: { appid: TQ_APPID, appsecret: TQ_APPSECRET, adcode: adcodes.join(',') },
    });

    res.json({ route: routes[0], weather: wxRes.data });
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
});

app.listen(3000, () => console.log('route-weather server on :3000'));
```

环境变量（`.env`，**切勿提交到代码仓库**）：

```env
TENCENT_KEY=你的腾讯服务端Key
TQ_APPID=你的天气接口appid
TQ_APPSECRET=你的天气接口appsecret
```

---

## 八、前端渲染示例

前端只与自有后端交互，不持有任何第三方密钥。

```js
// 请求沿途天气
async function loadRouteWeather(from, to) {
  const q = new URLSearchParams({ from, to }); // from/to 均为 "lat,lng"
  const res = await fetch(`/api/route-weather?${q}`);
  const { route, weather } = await res.json();

  // 渲染天气卡片列表
  const list = weather.list || [];
  list.forEach((item) => {
    renderWeatherCard(item);
  });

  // 如需在地图上打点，可用 item.lat / item.lon（纬度在前）
}

function renderWeatherCard(item) {
  const air = airLevel(item.air);
  const alarmText = (item.alarm && item.alarm.length)
    ? item.alarm.map((a) => `${a.title}（${a.level}）`).join('；')
    : '无';

  console.log(
    `${item.city} | ${item.wea} ${item.tem}℃ | ${item.win} | ` +
    `空气${air.label} | 预警：${alarmText}`
  );
  // 实际项目：把上述信息填充到 DOM 卡片或地图 Marker 弹窗
}
```

---

## 关键注意事项

1. **密钥与调用位置**：腾讯 `key`、天气 `appid/appsecret` 必须放在服务端；天气接口官方明确要求「线路地址设置在服务端，请勿在 C 端直连」。前端只能调用自有后端。
2. **坐标顺序陷阱**：腾讯 `from/to` 与天气 `lat/lon` **都是纬度在前、经度在后**，前后保持一致，避免经纬度颠倒导致定位偏移。
3. **去重与上限**：`cities` 可能包含起终点重复项，需去重；天气接口单次最多 100 个城市，超长路线需抽样（如每 N 个城市取一个代表）。
4. **预警字段判空**：`alarm` 可能为空数组或含多条，渲染前务必判空并遍历，避免前端报错。
5. **温度与 AQI 类型**：`tem` / `air` 返回的是字符串，着色或计算前先 `Number()` 转换。
6. **多方案路线**：传 `get_mp=1` 可返回最多 3 条方案，默认取 `routes[0]`（推荐方案）即可满足绝大多数场景。



适用场景：自驾 / 长途出行类 App、小程序，在地图上展示从起点到终点沿途经过各城市的实时天气与气象预警。

腾讯地图驾车（driving）路线规划实现沿途多城市天气展示功能

人工智能

自驾路线规划中实时获取沿途城市天气与气象预警，集成腾讯地图路线API获取途经城市adcode，批量请求天气接口展示温度、风力、空气质量及预警信息，服务端密钥保护，支持多城市去重与限流，前端安全渲染。

代码解释

多云

JSON

腾讯云双十一大促

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

腾讯地图驾车（driving）路线规划实现沿途多城市天气展示功能-腾讯云开发者社区-腾讯云

腾讯地图驾车（driving）路线规划实现沿途多城市天气展示功能

腾讯地图驾车（driving）路线规划实现沿途多城市天气展示功能

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐