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

点击查看演示效果HTML一、业务场景与整体思路1.1 为什么需要「沿途多城市天气」出行类产品常见需求输入起点终点地图上画出驾车路线同时沿途城市逐个显示天气图标点击图标查看温度、风向风力、AQI遇到大风、大雾、暴雨等预警直接标红提示。自己从零实现的两个痛点逐个城市循环调单城市天气接口途经 10 个区县就发 10 次请求慢且浪费配额路线轨迹逆地理编码需要把路线折线点串反查成区县归属逻辑重、接口多、不稳定。citypath路线沿途多城市天气预报接口就是为「一次传多个区划编码、批量拿天气」设计的可以直接和路线规划接口的区划字段对接。1.2 整体数据流起点 / 终点坐标 │ ▼ 百度 Direction v2 /driving 驾车规划接口 │ 返回 routes[].steps[].adcodes途经区划编码 ▼ 分割 去重 → 得到 adcode 数组 → 拼接为逗号分隔字符串 │ ▼ tianqiapi citypath 批量天气接口 │ 返回 list[]城市、天气、温度、风力、AQI、预警 ▼ 前端地图绘制驾车路线 Polyline 各城市天气 Marker图标 弹窗详情安全红线百度 AK 与天气接口的appid / appsecret都不能直接下发到浏览器生产环境应由后端统一代理转发前端只请求自己的后端服务。下文前端代码仅用于说明数据处理与渲染逻辑。二、两个接口说明2.1 百度驾车路线规划 v2Web Service API请求地址https://api.map.baidu.com/direction/v2/driving常用参数参数说明示例origin起点纬度,经度40.01116,116.339303destination终点纬度,经度38.876147,116.465326ak开发者密钥你的 AKcallback传入则以 JSONP 形式返回供前端直接调用测试用cb返回结构节选{status:0,message:成功,result:{routes:[{distance:145983,duration:8022,traffic_light:16,steps:[{road_name:清华东路,adcodes:110000,131003,path:116.343935,40.006080;116.344135,40.006090}]}]}}关键字段steps[].path该路段折线点串经度,纬度分号分隔用于在地图上绘制路线steps[].adcodes该路段所属区划编码。实际开发中可能是逗号分隔也可能混入分号分隔甚至同一步骤多编码提取时要按,和;一起分割本文第五节有实例。2.2 citypath 沿途多城市天气接口官方文档http://tianqiapi.com/index/doc?versioncitypath请求地址http://pddfps.tianqiapi.com/free/citypath请求方式GET参数必填说明appid是平台分配的 appidappsecret是平台密钥禁止暴露到前端adcode是多个区划编码英文逗号分隔单次数量上限以官方文档为准超量请分批请求请求示例密钥请替换为自己的切勿公开真实密钥http://pddfps.tianqiapi.com/free/citypath?appid你的appidappsecret你的secretadcode131003,131023,131081,131026返回结构{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风向 风力直接展示airAQI 数值需自行分级着色优 / 良 / 轻度污染 / 中度污染等alarm预警数组可能为空数组也可能多条预警需要判空并遍历lat/lon区县中心点坐标注意纬度在前、经度在后三、实战开发步骤步骤 1调用百度驾车接口拿到路线与 adcodes前端测试可用 JSONP 注入script的方式调用生产环境由后端代理。// 仅测试用途生产环境请由后端代理避免 AK 泄露functionrequestDrive(origin,destination,ak){returnnewPromise((resolve,reject){constcbName__driveCb_Date.now();constscriptdocument.createElement(script);constcleanup(){script.remove();deletewindow[cbName];};window[cbName](resp){cleanup();if(respresp.status0resp.result?.routes?.length){resolve(resp.result.routes[0]);}else{reject(newError(路线接口返回异常(resp?.message||无数据)));}};script.onerror(){cleanup();reject(newError(网络错误));};script.srchttps://api.map.baidu.com/direction/v2/driving?originorigindestinationdestinationakakcallbackcbName;document.head.appendChild(script);});}步骤 2从 steps 中提取并去重 adcode关键同时按逗号、分号分割并过滤空串、去重。functionextractAdcodes(route){constsetnewSet();route.steps.forEach((step){(step.adcodes||).split(/[,;]/)// 逗号和分号都要切.map((code)code.trim()).filter(Boolean)// 过滤空字符串.forEach((code)set.add(code));});return[...set];}// 得到逗号分隔的传参串131003,131023,131081,131026constadcodeArrextractAdcodes(route);constadcodeQueryadcodeArr.join(,);注意像110000这类省级 / 直辖市级粗代码天气接口可能查不到对应区县数据返回list会少于传入数量前端要按实际返回渲染不能假设「传几个就回几个」。步骤 3请求天气接口生产走后端代理前端只请求自己后端的接口由后端携带appid / appsecret调用 citypathasyncfunctionrequestPathWeather(adcodeQuery){// 前端 → 自己的后端后端内部再请求 citypathconstrespawaitfetch(/api/path-weather?adcodeencodeURIComponent(adcodeQuery));if(!resp.ok)thrownewError(天气接口请求失败);constdataawaitresp.json();returndata.list||[];}后端 Node.jsExpress代理示例供参考constexpressrequire(express);constaxiosrequire(axios);constappexpress();app.get(/api/path-weather,async(req,res){try{const{data}awaitaxios.get(http://pddfps.tianqiapi.com/free/citypath,{params:{appid:process.env.TQ_APPID,// 从环境变量读取不要写死appsecret:process.env.TQ_SECRET,adcode:req.query.adcode}});res.json(data);}catch(e){res.status(502).json({message:上游天气接口异常});}});app.listen(3000);步骤 4地图渲染路线 天气图标 Marker以 LeafletCDN 引入即可无需 Key为例使用百度 GL 地图时 API 名称不同思路一致。// 1) 绘制驾车路线折线先铺一层白色晕边再铺蓝色主线constrouteLatLngroutePoints.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){consticonL.divIcon({className:end-label,iconSize:[40,46],iconAnchor:[20,18],html:divdiv stylewidth: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 autoweatherSvg(city.wea_img)// 按 wea_img 选图标/divdiv stylefont-size:10px;background:rgba(255,255,255,.94);border-radius:5px;padding:1px 5px;margin-top:2px;white-space:nowrapcity.city city.tem°/div/div});constmarkerL.marker([Number(city.lat),Number(city.lon)],{icon}).addTo(map);// 3) 弹窗天气、温度、风力、AQI、预警遍历全部预警constalarmHtmlcity.alarm?.length?div stylecolor:#dc2626;margin-top:4pxcity.alarm.map((a)a.levela.type预警a.title).join(br)/div:;marker.bindPopup(bcity.citycity.adcode/bbr天气city.wea 温度city.tem°br风力city.winbrAQIcity.airalarmHtml);});天气图标按wea_img映射一段内联 SVG 即可晴 太阳、多云 太阳 云、阴 灰云、雨 云 雨滴、雪 云 雪花未命中的 key 统一用通用云图标兜底。步骤 5主流程编排asyncfunctionfetchAll(){constrouteawaitrequestDrive(ORIGIN,DEST,AK);renderRoute(route);// 先画路线constadcodeArrextractAdcodes(route);constweatherawaitrequestPathWeather(adcodeArr.join(,));renderWeather(weather);// 再叠天气点}四、坐标体系与渲染注意事项坐标系不要混用百度方向接口返回的折线点是BD09天气接口的lat/lon一般为国内底图常用的GCJ02OSM 等开源瓦片是 WGS84。若底图是高德 / 腾讯系GCJ02百度折线点需要做 BD09 → GCJ02 转换后再绘制否则路线会整体偏移几百米。数组顺序不要写反天气返回lat, lon多数地图库的Marker(lat, lng)也是纬度在前而百度BMapGL.Point(lng, lat)是经度在前粘贴代码前务必核对构造参数顺序写反 Marker 会跑到错误位置。AQI 自行分级着色functionairLevel(aqi){constaNumber(aqi)||0;if(a50)return{txt:优,color:#16a34a};if(a100)return{txt:良,color:#d97706};if(a150)return{txt:轻度污染,color:#ea580c};if(a200)return{txt:中度污染,color:#dc2626};return{txt:重度污染,color:#991b1b};}起终点用醒目颜色区分起点绿色、终点红色天气点用白色圆形底 天气图标层级上不要喧宾夺主。五、真实踩坑清单序号坑点现象解决办法1adcodes 分隔符不统一有的步骤是逗号有的是分号甚至混排split(/[,;]/)同时分割trim() 过滤空串 Set 去重2省级粗代码无天气数据传入110000但list不返回它按实际返回渲染缺数据不报错UI 留空态说明3单次 adcode 过多请求被拒或返回不全分批切片循环请求后合并数量上限以官方文档为准4alarm可能有多条 / 空数组直接取alarm[0]报错或漏展示先判length再map遍历全部预警5wea_img无自带图片只有 key没有图标资源自建图标映射表未知 key 走兜底图标6坐标系偏移路线画在底图上错位BD09 / GCJ02 / WGS84 按底图统一转换7file://本地打开请求失败http 接口被混合内容策略 / CORS 限制起一个本地或线上 Web 服务访问页面不要直接双击 html8坐标顺序写反Marker 飞到别的位置逐库核对Point(lng, lat)与Marker(lat, lng)参数顺序9密钥泄露风险前端 JSONP / fetch 直接带 appsecret、AK生产环境全部后端代理密钥进环境变量10预警高亮不明显用户看不到恶劣天气提示有预警的 Marker 加红色角标弹窗预警文字标红六、生产环境优化建议后端缓存天气实况变化慢按 adcode 组合缓存 510 分钟减少上游调用、节省配额路线数据实时性要求高可短缓存或不缓存。失败降级天气接口异常时只渲染路线并提示「沿途天气获取失败」不阻断主流程。Marker 聚合长途路线途经城市多时启用点聚合避免图标堆叠遮挡路线。预警前置提醒列表 / 横幅汇总「途经区域共 N 条预警」用户打开页面即可感知。配额监控后端记录每日调用量与失败率异常增长及时告警防止密钥被盗刷耗尽额度。距离 / 用时格式化米转 km保留 1 位小数、秒转「X 时 X 分」避免直接展示原始数值。七、小结citypath的价值在于省去「轨迹点逆地理编码 → 逐城查天气」的重复造轮子直接复用百度驾车接口返回的区划编码一次批量拿到沿途天气。落地时把握三个要点adcode 提取要稳多分隔符分割、去重、容错粗代码密钥不下发前端百度 AK、天气密钥统一由后端代理渲染以地图为核心路线折线 天气图标 Marker 预警弹窗坐标体系统一、顺序核对清楚。最终效果输入起点终点地图自动绘制驾车路线沿途区县逐个显示天气图标点击查看温度、风力、空气质量与气象预警适合出行规划、长途摩旅 / 自驾、货车调度等场景。参考文档citypath 路线沿途多城市天气预报接口文档http://tianqiapi.com/index/doc?versioncitypath百度地图 Web 服务 API · 驾车路线规划 V2https://lbsyun.baidu.com/index.php?titlewebapi/direction-v2-api本文代码片段为思路演示生产使用请按自身技术栈补充后端代理、鉴权、缓存与错误重试逻辑。