![WX20261111-120345@2x.png](https://developer.qcloudimg.com/http-save/yehe-8626216/70df74223b8242d65df42bf7b9c9d57e.png)


本文带你从零实现一个「沿途天气」功能，核心链路如下：

1. 调用BD地图**驾车路线规划**，拿到路线途经的所有城市行政区划编码（`adcode`）；
2. 用这些 `adcode` **批量请求多城市天气接口**，一次拿回沿途城市的温度、天气、风力、空气质量与预警；
3. 在微信小程序 `<map>` 组件上绘制真实驾车路线，并把每个城市的天气以**标记点**展示。

完整链路：

```
起点/终点(GCJ-02) ─→ direction/v2/driving ─→ routes[].steps[].adcodes
                                                          │
                                           去重 / 逗号拼接 adcode 字符串
                                                          │
                                              多城市天气接口 ?adcode=xxx,yyy
                                                          │
                                    天气数据 wea/tem/win/air/alarm + lat/lon
                                                          │
                              小程序 <map>：路线 polyline + 起终点 marker + 天气 marker
```



## 一、接口准备与密钥

### 1.1 百度地图开放平台

- 在地图开放平台控制台「应用管理 → 我的应用」创建应用，类型选择**服务端**，获取 `AK`。
- 本文使用的是**服务端 Web API**（`direction/v2/driving`），与 JS API 的 key 不能混用。

### 1.2 多城市天气接口

- 在 tianqiapi.com 申请账号，拿到 `appid` 与 `appsecret`。
- 该接口支持一次传入多个 `adcode`（英文逗号分隔），返回每个城市的实时天气与预警。

---

## 二、关键技术点：坐标系转换（必看，否则路线会偏移）

微信小程序 `<map>` 组件使用的是 **GCJ-02**（国测局火星坐标）；而地图返回的是 **BD-09**。如果直接把baidu坐标画到微信地图上，路线会肉眼可见地「偏移」几百米到几公里。

解决方式：

- 把起点/终点用 **GCJ-02 → BD-09** 转换后再传；
- 拿到地图接口返回的路线/城市坐标后，再 **BD-09 → GCJ-02** 转回，最后才交给地图组件。

```js
const X_PI = (Math.PI * 3000.0) / 180.0;

// BD-09 → 微信 GCJ-02
function bd09ToGcj02(bdLng, bdLat) {
  const x = bdLng - 0.0065;
  const y = bdLat - 0.006;
  const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
  const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
  return [z * Math.cos(theta), z * Math.sin(theta)];
}

// 微信 GCJ-02 → BD-09
function gcj02ToBd09(lng, lat) {
  const z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * X_PI);
  const theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * X_PI);
  return [z * Math.cos(theta) + 0.0065, z * Math.sin(theta) + 0.006];
}
```

---

## 三、实现步骤

### 3.1 配置与辅助函数

```js
const CONFIG = {
  baiduAk: 'YOUR_BAIDU_AK',        // 替换为你的百度服务端 AK
  tqAppid: 'YOUR_APPID',           // 天气接口 appid（建议走后端）
  tqAppsecret: 'YOUR_APPSECRET',   // 天气接口 appsecret（建议走后端）
  from: '34.636804,113.549694',    // 起点 GCJ-02 坐标（示例：郑州）
  to: '32.011083,112.139012',      // 终点 GCJ-02 坐标（示例：襄阳）
  proxyBase: '',                   // 生产环境填你的后端地址，由后端转发百度与天气接口
};

function httpGet(url) {
  return new Promise((resolve, reject) => {
    wx.request({ url, success: r => resolve(r.data), fail: reject });
  });
}

function pt(str) {
  const arr = String(str).split(',');
  return { lat: Number(arr[0]), lng: Number(arr[1]) };
}

// 天气图标映射（wea_img 字段 → emoji）
const WEA_ICON = {
  qing: '☀️', yun: '⛅', yin: '☁️', yu: '🌧️', xue: '❄️',
  wu: '🌫️', lei: '⛈️', shachen: '🌪️',
};

// AQI 分级
function airLevel(aqi) {
  aqi = Number(aqi) || 0;
  if (aqi <= 50) return { label: '优' };
  if (aqi <= 100) return { label: '良' };
  if (aqi <= 150) return { label: '轻度' };
  if (aqi <= 200) return { label: '中度' };
  if (aqi <= 300) return { label: '重度' };
  return { label: '严重' };
}
```

### 3.2 路线规划：拿到途经城市 adcode

百度 `direction/v2/driving` 的 `routes[].steps[].adcodes` 字段就是途经的行政区划编码（注意：公开的 `directionlite` **没有**该字段，必须用 v2 服务端接口）。每个 step 的 `adcodes` 可能是逗号分隔的多个编码，需要**分割、跨 step 去重**。

```js
async planRoute() {
  this.setData({ loading: true, error: '', weatherList: [], map: null });

  let dir;
  try {
    dir = await this.fetchDriving();
  } catch (e) {
    this.setData({ loading: false, error: (e && e.message) || '路线规划失败，请重试。' });
    return;
  }

  const adcodes = this.collectAdcodes(dir);
  if (!adcodes.length) {
    this.setData({ loading: false, error: '未解析到途经城市，请检查起终点坐标。' });
    return;
  }

  let list;
  try {
    list = await this.fetchWeather(adcodes);
  } catch (e) {
    this.setData({ loading: false, error: (e && e.message) || '天气请求失败，请重试。' });
    return;
  }

  const ordered = this.orderWeather(adcodes, list);
  const map = this.buildMap(dir, ordered);
  this.setData({ loading: false, weatherList: ordered, map });
},

fetchDriving() {
  const { baiduAk, from, to, proxyBase } = CONFIG;
  const s = pt(from), e = pt(to);
  // 微信坐标(GCJ-02) → 百度坐标(BD-09) 再请求
  const [sBdLng, sBdLat] = gcj02ToBd09(s.lng, s.lat);
  const [eBdLng, eBdLat] = gcj02ToBd09(e.lng, e.lat);
  const origin = `${sBdLat},${sBdLng}`;
  const destination = `${eBdLat},${eBdLng}`;

  const url = proxyBase
    ? `${proxyBase}/driving?origin=${origin}&destination=${destination}`
    : `https://api.map.baidu.com/direction/v2/driving?origin=${origin}&destination=${destination}&ak=${baiduAk}`;

  return httpGet(url).then(data => {
    if (data.status !== 0) {
      throw new Error(`路线规划失败（${data.status}）：${data.message || '未知错误'}`);
    }
    const routes = (data.result && data.result.routes) || [];
    if (!routes.length) throw new Error('未返回可行路线');
    return routes[0];
  });
},

collectAdcodes(route) {
  const set = new Set();
  const steps = (route && route.steps) || [];
  steps.forEach(step => {
    const sub = step.steps ? step.steps : [step];
    sub.forEach(s => {
      const raw = s.adcodes;
      if (!raw) return;
      String(raw)
        .split(/[,;]/)
        .map(c => c.trim())
        .filter(Boolean)
        .forEach(c => set.add(c));
    });
  });
  return [...set].slice(0, 100);
},
```

### 3.3 批量天气查询

把去重后的 `adcode` 用逗号拼接，一次性请求天气接口即可：

```js
fetchWeather(adcodes) {
  const { tqAppid, tqAppsecret, proxyBase } = CONFIG;
  const code = adcodes.join(',');
  const url = proxyBase
    ? `${proxyBase}/weather?adcode=${code}`
    : `https://pddfps.tianqiapi.com/free/citypath?appid=${tqAppid}&appsecret=${tqAppsecret}&adcode=${code}`;
  return httpGet(url).then(data => {
    const list = (data && data.list) || [];
    if (!list.length) throw new Error('天气接口未返回数据（检查 appid/appsecret 或 adcode）');
    return list;
  });
},

orderWeather(adcodes, list) {
  const map = {};
  list.forEach(w => { map[String(w.adcode)] = w; });
  const out = [];
  adcodes.forEach(code => {
    const w = map[code];
    if (!w) return;
    out.push({
      adcode: code,
      city: w.city || '',
      wea: w.wea || '',
      icon: WEA_ICON[w.wea_img] || '🌡️',
      tem: w.tem,
      win: w.win || '',
      air: airLevel(w.air),
      alarm: (w.alarm && w.alarm.length) ? w.alarm.map(a => `${a.title}（${a.level}）`).join('；') : '',
      lat: w.lat,
      lon: w.lon,
    });
  });
  return out;
},
```

> 天气返回数据里每个城市都带 `lat/lon`，正好用来在地图上打点。

### 3.4 在地图上绘制路线 + 天气标记

百度返回的路线是 `steps[].path`（格式 `经度,纬度;经度,纬度`，BD-09），需要逐点转回 GCJ-02 再喂给 `polyline`：

```js
extractPath(dir) {
  const pts = [];
  const steps = (dir && dir.steps) || [];
  steps.forEach(step => {
    const sub = step.steps ? step.steps : [step];
    sub.forEach(s => {
      const path = s.path || '';
      path.split(';').forEach(seg => {
        const p = seg.split(',');
        if (p.length === 2) {
          const lng = Number(p[0]), lat = Number(p[1]);
          if (lng && lat) {
            const [glng, glat] = bd09ToGcj02(lng, lat); // BD-09 → GCJ-02
            pts.push({ latitude: glat, longitude: glng });
          }
        }
      });
    });
  });
  return pts;
},

buildMap(dir, weatherList) {
  const pathPts = this.extractPath(dir);
  const start = pathPts.length ? pathPts[0] : { latitude: pt(CONFIG.from).lat, longitude: pt(CONFIG.from).lng };
  const end = pathPts.length ? pathPts[pathPts.length - 1] : { latitude: pt(CONFIG.to).lat, longitude: pt(CONFIG.to).lng };
  const points = pathPts.length
    ? pathPts
    : [{ latitude: start.latitude, longitude: start.longitude }, { latitude: end.latitude, longitude: end.longitude }];

  const weatherMarkers = (weatherList || []).filter(w => w.lat && w.lon).map((w, i) => ({
    id: i + 2,
    latitude: Number(w.lat),
    longitude: Number(w.lon),
    label: { content: `${w.icon} ${w.tem}°`, color: '#1d1d1f', bgColor: '#ffffff', padding: 4, borderRadius: 6, fontSize: 11, anchorX: 0, anchorY: -30 },
    callout: {
      content: `${w.icon} ${w.city}\n${w.wea} ${w.tem}°\n${w.win}\n空气${w.air.label}` + (w.alarm ? `\n⚠️ ${w.alarm}` : ''),
      color: '#1d1d1f', bgColor: '#ffffff', padding: 10, borderRadius: 10, display: 'BYCLICK', textAlign: 'left',
    },
  }));

  const markers = [
    { id: 0, latitude: start.latitude, longitude: start.longitude, callout: { content: '起点', color: '#ffffff', bgColor: '#1abc6b', padding: 8, borderRadius: 8, display: 'ALWAYS' } },
    { id: 1, latitude: end.latitude, longitude: end.longitude, callout: { content: '终点', color: '#ffffff', bgColor: '#ef4b63', padding: 8, borderRadius: 8, display: 'ALWAYS' } },
    ...weatherMarkers,
  ];
  const polylines = [{ points, color: '#0071e3', width: 6, arrowLine: true, borderWidth: 1, borderColor: '#ffffff' }];
  const includePoints = [
    { latitude: start.latitude, longitude: start.longitude },
    { latitude: end.latitude, longitude: end.longitude },
    ...(weatherList || []).filter(w => w.lat && w.lon).map(w => ({ latitude: Number(w.lat), longitude: Number(w.lon) })),
  ];
  return {
    centerLat: (start.latitude + end.latitude) / 2,
    centerLng: (start.longitude + end.longitude) / 2,
    scale: fitScale(includePoints),
    markers,
    polylines,
    includePoints,
  };
},
```


### 3.5 页面与配置

`index.wxml`：

```xml
<view class="page">
  <view class="hero">
    <view class="hero-title">沿途天气</view>
    <view class="hero-sub">驾车路线 · 沿途城市实况天气与预警</view>
    <map wx:if="{{map}}" class="map"
      latitude="{{map.centerLat}}" longitude="{{map.centerLng}}" scale="{{map.scale}}"
      markers="{{map.markers}}" polyline="{{map.polylines}}" include-points="{{map.includePoints}}"></map>
  </view>
  <view wx:if="{{loading}}" class="state">
    <view class="spinner"></view>
    <text class="state-text">正在规划路线，查询沿途天气…</text>
  </view>
  <view wx:elif="{{error}}" class="state">
    <text class="state-text error">{{error}}</text>
  </view>
</view>
```

`index.wxss`（关键样式）：

```css
.map {
  width: 100%;
  height: 80vh;
  margin-top: 24rpx;
  border-radius: 24rpx;
  box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.04);
}
```

---

## 四、避坑指南

1. **坐标系一定要转**：百度 BD-09 与微信 GCJ-02 不一致，不转会肉眼偏移，这是最容易踩的坑。
2. **`directionlite` 没有 `adcodes`**：想要途经城市编码必须用 `direction/v2/driving`（服务端接口），并配对应的服务端 AK。
3. **密钥安全**：天气接口的 `appid/appsecret` 是账号凭证，前端直连只是调试用；上线必须走自有后端转发（代码里的 `proxyBase` 已为此预留）。
4. **配额限制**：百度与天气接口都有日调用配额，公开/共享 key 容易被刷满，正式项目请用自己的账号申请。
5. **adcode 去重**：同一条路线会跨多个 step 重复出现同一城市，需去重后再请求天气，既省钱又避免重复标记。

---

## 五、小结

通过「驾车规划拿 adcode → 多城市天气批量查询 → 地图绘制」三步，我们实现了一个实用的「沿途天气」功能。核心难点在于**坐标系转换**与**密钥安全**，处理好这两点，整套链路就非常稳定。

这套思路不限于小程序，也可用于自驾游、物流干线监控、跨省通勤等「沿线多城市信息聚合」场景。

---




用这些 adcode 批量请求多城市天气接口，一次拿回沿途城市的温度、天气、风力、空气质量与预警；

微信小程序驾车路线规划展示沿途城市天气

调用地图**驾车路线规划**，拿到路线途经的所有城市行政区划编码（`adcode`）用这些 `adcode` 批量请求多城市天气接口，一次拿回沿途城市的温度、天气、风力、空气质量与预警；

前端

网络与通信

基于百度地图direction/v2/driving获取途经城市adcode，批量调用多城市天气接口，在小程序<map>上绘制真实驾车路线并标注沿途天气。核心解决BD-09与GCJ-02坐标转换，实现温度、风力、空气质量及预警可视化，提供完整代码实现与避坑指南。

代码解释

应用管理

对象存储COS新用户低至1元！


腾讯云双十一大促

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

社区新版编辑器体验调研

微信小程序驾车路线规划展示沿途城市天气-腾讯云开发者社区-腾讯云

微信小程序驾车路线规划展示沿途城市天气

微信小程序驾车路线规划展示沿途城市天气

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐