
> 出行类产品常见需求：输入起点终点，地图上画出驾车路线，同时沿途城市逐个显示天气图标，点击图标查看温度、风向风力、AQI，遇到大风、大雾、暴雨等预警直接标红提示。

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

 `citypath` 接口就是为「**一次传多个区划编码、批量拿天气**」设计的，可以直接和路线规划接口的区划字段对接。

### 整体实现流程

```text
起点 / 终点坐标
      │
      ▼
/driving 驾车规划接口
      │  返回 routes[].steps[].adcodes（途经区划编码）
      ▼
分割 + 去重 → 得到所有途径 adcode 字符串
      │
      ▼
citypath 批量天气接口
      │  返回 list[]：城市、天气、温度、风力、AQI、预警
      ▼
前端地图：绘制驾车路线 Polyline + 各城市天气 Marker（图标 + 弹窗详情）
```

---

## 两个接口说明

### 1 驾车路线规划接口（Web Service API）

- 请求地址：`/driving`
- 常用参数：

| 参数 | 说明 | 示例 |
|---|---|---|
| `origin` | 起点 `纬度,经度` | `40.01116,116.339303` |
| `destination` | 终点 `纬度,经度` | `38.876147,116.465326` |
| `ak` | 开发者密钥 | 你的 AK |


关键字段：

- `steps[].path`：该路段折线点串，`经度,纬度` 分号分隔，用于在地图上绘制路线；
- `steps[].adcodes`：该路段所属区划编码。**实际开发中可能是逗号分隔，也可能混入分号分隔，甚至同一步骤多编码，提取时要按 `,` 和 `;` 一起分割**

### 2 citypath 沿途多城市天气接口

- 请求方式：GET

| 参数 | 必填 | 说明 |
|---|---|---|
| `appid` | 是 | 平台分配的 appid |
| `appsecret` | 是 | 平台密钥，禁止暴露到前端 |
| `adcode` | 是 | 区划编码(支持最多100个城市查询)，英文逗号分隔；如：adcode=130400,230800 |

请求示例（密钥请替换为自己的，切勿公开真实密钥）：

```http
http://pddfps.tianqiapi.com/free/citypath?appid=55556666&appsecret=12341234&adcode=131003,131023,131081,131026
```

返回结构：

```json
{
  "nums": 35,
  "list": [
    {
      "adcode": "131003",
      "city": "广阳",
      "uptime": "12:20",
      "lat": "39.521931",
      "lon": "116.713708",
      "wea": "晴",
      "wea_img": "qing",
      "tem": "17.7",
      "win": "西风 3级",
      "air": "104",
      "alarm": [
        {
          "type": "大风",
          "level": "蓝色",
          "title": "河北省发布大风蓝色预警"
        }
      ]
    }
  ]
}
```

字段含义：

| 字段 | 含义 | 处理要点 |
|---|---|---|
| `adcode` | 区划编码 | 与路线接口的 adcode 对应 |
| `city` | 城市 / 区县名 | Marker 标签与弹窗标题 |
| `wea` | 实况天气文字 | 弹窗展示 |
| `wea_img` | 天气图标标识 | `qing` 晴、`yun` 多云、`yin` 阴、`yu` 雨、`xue` 雪、`wu` 雾等，前端据此映射图标 |
| `tem` | 实时温度（℃） | 直接展示，注意是字符串 |
| `win` | 风向 + 风力 | 直接展示 |
| `air` | AQI 数值 | 需自行分级着色：优 / 良 / 轻度污染 / 中度污染等 |
| `alarm` | 预警数组 | 可能为空数组，也可能多条预警，需要判空并遍历 |
| `lat` / `lon` | 区县中心点坐标 | 注意 **纬度在前、经度在后** |

---

## 实战开发步骤

### 步骤 1：调用驾车接口拿到路线与 adcodes

前端测试可用 JSONP 注入 `<script>` 的方式调用；生产环境由后端代理。

```javascript
// 仅测试用途；生产环境请由后端代理，避免 AK 泄露
function requestDrive(origin, destination, ak) {
  return new Promise((resolve, reject) => {
    const cbName = '__driveCb_' + Date.now();
    const script = document.createElement('script');
    const cleanup = () => { script.remove(); delete window[cbName]; };

    window[cbName] = (resp) => {
      cleanup();
      if (resp && resp.status === 0 && resp.result?.routes?.length) {
        resolve(resp.result.routes[0]);
      } else {
        reject(new Error('路线接口返回异常：' + (resp?.message || '无数据')));
      }
    };
    script.onerror = () => { cleanup(); reject(new Error('网络错误')); };
    script.src =
      'https://api.map.baidu.com/direction/v2/driving?origin=' + origin +
      '&destination=' + destination + '&ak=' + ak + '&callback=' + cbName;
    document.head.appendChild(script);
  });
}
```

### 步骤 2：从 steps 中提取并去重 adcode

**关键：同时按逗号、分号分割，并过滤空串、去重。**

```javascript
function extractAdcodes(route) {
  const set = new Set();
  route.steps.forEach((step) => {
    (step.adcodes || '')
      .split(/[,;]/)              // 逗号和分号都要切
      .map((code) => code.trim())
      .filter(Boolean)            // 过滤空字符串
      .forEach((code) => set.add(code));
  });
  return [...set];
}

// 得到逗号分隔的传参串：131003,131023,131081,131026
const adcodeArr = extractAdcodes(route);
const adcodeQuery = adcodeArr.join(',');
```

> 注意：像 `110000` 这类省级 / 直辖市级粗代码，天气接口可能查不到对应区县数据，返回 `list` 会少于传入数量，前端要按实际返回渲染，不能假设「传几个就回几个」。

### 请求天气接口（生产走后端代理）

前端只请求自己后端的接口，由后端携带 `appid / appsecret` 调用 citypath：

```javascript
async function requestPathWeather(adcodeQuery) {
  // 前端 → 自己的后端；后端内部再请求 citypath
  const resp = await fetch('/api/path-weather?adcode=' + encodeURIComponent(adcodeQuery));
  if (!resp.ok) throw new Error('天气接口请求失败');
  const data = await resp.json();
  return data.list || [];
}
```


### 地图渲染路线 + 天气图标 Marker

```javascript
// 1) 绘制驾车路线折线：先铺一层白色晕边，再铺蓝色主线
const routeLatLng = routePoints.map(([lng, lat]) => bd09ToGcj(lng, lat));
L.polyline(routeLatLng, { color: '#ffffff', weight: 8, opacity: 0.85 }).addTo(map);
L.polyline(routeLatLng, { color: '#2563eb', weight: 4 }).addTo(map);

// 2) 逐个城市渲染天气 Marker：图标 + 名称温度标签 + 点击弹窗
weatherList.forEach((city) => {
  const icon = L.divIcon({
    className: 'end-label',
    iconSize: [40, 46],
    iconAnchor: [20, 18],
    html:
      '<div>' +
        '<div style="width:28px;height:28px;background:#fff;border-radius:50%;' +
             'box-shadow:0 1px 5px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;margin:0 auto">' +
          weatherSvg(city.wea_img) +          // 按 wea_img 选图标
        '</div>' +
        '<div style="font-size:10px;background:rgba(255,255,255,.94);' +
             'border-radius:5px;padding:1px 5px;margin-top:2px;white-space:nowrap">' +
          city.city + ' ' + city.tem + '°' +
        '</div>' +
      '</div>'
  });

  const marker = L.marker([Number(city.lat), Number(city.lon)], { icon }).addTo(map);

  // 3) 弹窗：天气、温度、风力、AQI、预警（遍历全部预警）
  const alarmHtml = city.alarm?.length
    ? '<div style="color:#dc2626;margin-top:4px">' +
      city.alarm.map((a) => a.level + a.type + '预警：' + a.title).join('<br>') +
      '</div>'
    : '';

  marker.bindPopup(
    '<b>' + city.city + '（' + city.adcode + '）</b><br>' +
    '天气：' + city.wea + '　温度：' + city.tem + '°<br>' +
    '风力：' + city.win + '<br>' +
    'AQI：' + city.air + alarmHtml
  );
});
```

天气图标按 `wea_img` 映射一段内联 SVG 即可（晴 = 太阳、多云 = 太阳 + 云、阴 = 灰云、雨 = 云 + 雨滴、雪 = 云 + 雪花），未命中的 key 统一用通用云图标兜底。



---

## 坐标体系与渲染注意事项

1. **坐标系不要混用**：百度方向接口返回的折线点是 **BD09**；天气接口的 `lat/lon` 一般为国内底图常用的 **GCJ02**；OSM 等开源瓦片是 WGS84。若底图是高德 / 腾讯系（GCJ02），百度折线点需要做 BD09 → GCJ02 转换后再绘制，否则路线会整体偏移几百米。
2. **数组顺序不要写反**：天气返回 `lat, lon`；多数地图库的 `Marker(lat, lng)` 也是纬度在前；而百度 `BMapGL.Point(lng, lat)` 是经度在前，粘贴代码前务必核对构造参数顺序，写反 Marker 会跑到错误位置。
3. **AQI 自行分级着色**：

```javascript
function airLevel(aqi) {
  const a = Number(aqi) || 0;
  if (a <= 50)  return { txt: '优',       color: '#16a34a' };
  if (a <= 100) return { txt: '良',       color: '#d97706' };
  if (a <= 150) return { txt: '轻度污染', color: '#ea580c' };
  if (a <= 200) return { txt: '中度污染', color: '#dc2626' };
  return { txt: '重度污染', color: '#991b1b' };
}
```

4. **起终点用醒目颜色区分**：起点绿色、终点红色；天气点用白色圆形底 + 天气图标，层级上不要喧宾夺主。

---


## 七、小结

`citypath` 的价值在于省去「轨迹点逆地理编码 → 逐城查天气」的重复造轮子：**直接复用驾车路线规划接口返回的区划编码，一次批量拿到沿途天气**。落地时把握三个要点：

1. **adcode 提取要稳**：多分隔符分割、去重、容错粗代码；
2. **密钥不下发前端**：地图 AK、天气密钥统一由后端代理；
3. **渲染以地图为核心**：路线折线 + 天气图标 Marker + 预警弹窗，坐标体系统一、顺序核对清楚。

最终效果：输入起点终点，地图自动绘制驾车路线，沿途区县逐个显示天气图标，点击查看温度、风力、空气质量与气象预警，适合出行规划、长途摩旅 / 自驾、货车调度等场景。

---



出行类产品常见需求：输入起点终点，地图上画出驾车路线，同时沿途城市逐个显示天气图标，点击图标查看温度、风向风力、AQI，遇到大风、大雾、暴雨等预警直接标红提示。

地图路线规划展示沿途城市天气

本文介绍如何基于驾车路线规划API与citypath天气接口，实现路线沿途多城市批量天气查询与地图可视化。核心流程包括：获取路线及adcode、提取并去重行政区划编码、后端代理请求天气接口、统一坐标系下渲染路线与天气图标Marker。

人工智能

出行路线规划时，利用citypath接口一次性传入沿途区划编码，批量获取天气数据，实现路线与天气联动展示。驾驶路线接口返回区划编码，经分割去重后批量查询天气，地图上绘制路线并标记各城市天气、温度、风力、AQI及预警信息，前端按实际返回渲染，支持坐标转换与预警标红提示。

代码解释

多云

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

地图路线规划展示沿途城市天气-腾讯云开发者社区-腾讯云

地图路线规划展示沿途城市天气

地图路线规划展示沿途城市天气

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐