百度路况，地图显示路况[通勤时间][回家时间][逐段路况]

a22218279

前言：上一个帖子[百度通勤传感器]，修复了L大的插件，只实现传感器时间记录和文字路况信息。后续想把文字路况信息在地图上体现，更加直观的观看路况，于是就写了这个自定义卡片。

卡片预览


手动安装步骤

• 确保安装了 HACS
• 下载卡片拷贝至 /config/www/community/ 目录，最终文件路径是 /config/www/community/lovelace-baidu-map-card/baidu-map-card.js。
• HomeAssistant前端页面 -> 配置 -> 仪表盘 -> 右上角··· -> 资源 -> 添加资源 -> URL：/hacsfiles/lovelace-baidu-map-card/baidu-map-card.js，资源类型：JavaScript 模块 -> 创建。如果没有资源选项。先打开HA的高级模式。
  

准备工作

• 申请百度地图开放平台 服务器端api Key: https://lbsyun.baidu.com/apiconsole
• 申请百度地图开放平台 浏览器端api Key: https://lbsyun.baidu.com/apiconsole
• 创建HA的zone地点（需要确保有至少两个zone地点）：在HA管理界面的 配置 - 区域与地点 - 地点 - 添加地点。(两个zone分别作为起点和终点的实体)
• HomeAssistant前端添加自定义卡片，配置yaml参数。
  

自定义卡片配置说明

• 最简参数配置
  

# 最简参数配置
type: custom:baidu-map-card
jsapi: 填写浏览器端api Key    # 必填参数
serverapi: 填写服务器端api Key    # 必填参数
paths:    # 至少要有一条路径
- name: 上班路线    # 必填参数 - 路径名称，自定义，要唯一。
    st: zone.home    # 必填参数 - 起点，HA实体（带有经纬度属性）
    ed: zone.xxx    # 必填参数 - 终点，HA实体（带有经纬度属性）

复制代码

• 高级参数配置
  

# 高级参数配置
type: custom:baidu-map-card
jsapi: 填写浏览器端api Key # 必填参数
serverapi: 填写服务器端api Key # 必填参数
title: 驾车通勤时间   # 可选参数 - 标题
city: 上海           # 可选参数 - 默认值为上海。设置初始化地图时默认的城市。
daymode: false  # 可选参数 - 默认值为true。设置是否开启日间模式。
interval: 300   # 可选参数 - 默认值为300。设置数据刷新间隔，单位秒。
zoom_level: 11  # 可选参数 - 默认值为11。设置地图缩放级别。
line_weight: 4  # 可选参数 - 默认值为4。设置路径的绘制线粗。
line_opacity: 0.5   # 可选参数 - 默认值为0.5。设置路径的绘制透明度。
paths:  # 必填参数
- name: 上班路线  # 必填参数 - 第一条路径名称，自定义，要唯一。
    st: zone.home   # 必填参数 - 起点，HA实体（带有经纬度属性）
    st_type: google # 可选参数 - 默认值为baidu。起点实体对应的地图坐标系系统，可填 google / gaode / baidu
    ed: zone.xxx    # 必填参数 - 终点，HA实体（带有经纬度属性）
    ed_type: google # 可选参数 - 默认值为baidu。终点实体对应的地图坐标系系统，可填 google / gaode / baidu
    tactics: 0      # 可选参数 - 路线策略：0:"时间最短", 1:"不走高速", 2:"躲避拥堵", 3:"最短距离", 4:"花钱最少", 5: "大路优先"。默认值为0。
- name: 下班路线 # 可选参数 - 第二条路径名称，自定义，要唯一。
    st: zone.xxx
    st_type: google
    ed: zone.home
    ed_type: google
    default: true
    tactics: 4

复制代码

特别说明

• 刷新一次卡片会比较占用系统资源，所以取消了更改配置时预览卡片的功能。建议刷新间隔调成180-300秒，默认300秒（5分钟）。
• 在地图上按住鼠标右键不放，可以旋转地图视角。（会和浏览器手势插件冲突）
• 地图左上角的两个按钮也可以切换视角和卫星图模式。
  

BaiduMapCard.zip (9.27 KB, 下载次数: 56, 售价: 1 金钱)

2023-11-30 21:12 上传

点击文件名下载附件

ghostist

最近关于路况出了好多精品呀
很实用
dscao大佬还有你这个，还有我自用的，各有爽点，纠结症犯了哈哈

a22218279

ghostist 发表于 2023-11-30 22:35
最近关于路况出了好多精品呀
很实用
dscao大佬还有你这个，还有我自用的，各有爽点，纠结症犯了哈哈 ...

可以整合一下，Python那边用discao大佬的传感器轮询获取数据写到data，卡片再用JavaScript获取Python端的数据绘制地图路况和文字路况。

ghostist

a22218279 发表于 2023-11-30 23:09
可以整合一下，Python那边用discao大佬的传感器轮询获取数据写到data，卡片再用JavaScript获取Python端的 ...

玩HA到最后都要自己写插件嘛

a22218279

ghostist 发表于 2023-11-30 23:30
玩HA到最后都要自己写插件嘛

主要是自己需要的才去写，单独弄一个出行界面获取出行信息。下一个想弄一个汽车传感器的，我上汽大众电车的接口加密token这些，研究了很久都没突破...

DDDear

大佬，梦中情图！有方法生成图片吗，做微信推送

airwb

这个很实用，大佬厉害

a22218279

DDDear 发表于 2023-12-1 08:22
大佬，梦中情图！有方法生成图片吗，做微信推送

研究下，感觉不太好操作

water3033

楼主太牛了，可以使用，但存在以下报错，麻烦楼主好看看怎么解决。

Logger: frontend.js.latest.202310302
Source: components/system_log/__init__.py:300
First occurred: 2023年11月30日 22:28:09 (63 occurrences)
Last logged: 20:20:36

Uncaught error from Edge 116.0.1938.76 on Windows 10 TypeError: Cannot read properties of null (reading 'addressComponents') /hacsfiles/lovelace-baidu-map-card/baidu-map-card.js:498:21 kg.request.qt (/getscript:5:133676) bF._rd.<computed> [as _cbk17251] (/getscript:5:182790) /:1:40
Uncaught error from Edge 116.0.1938.76 on Windows 10 TypeError: Cannot read properties of null (reading 'addressComponents') /hacsfiles/lovelace-baidu-map-card/baidu-map-card.js:498:21 kg.request.qt (/getscript:5:133676) bF._rd.<computed> [as _cbk30687] (/getscript:5:182790) /:1:40
Uncaught error from Edge 116.0.1938.76 on Windows 10 TypeError: Cannot read properties of null (reading 'addressComponents') /hacsfiles/lovelace-baidu-map-card/baidu-map-card.js:498:21 kg.request.qt (/getscript:5:133676) bF._rd.<computed> [as _cbk38736] (/getscript:5:182790) /:1:40
Uncaught error from Edge 116.0.1938.76 on Windows 10 TypeError: Cannot read properties of null (reading 'addressComponents') /hacsfiles/lovelace-baidu-map-card/baidu-map-card.js:498:21 kg.request.qt (/getscript:5:133676) bF._rd.<computed> [as _cbk44565] (/getscript:5:182790) /:1:40
Uncaught error from Edge 116.0.1938.76 on Windows 10 TypeError: Cannot read properties of null (reading 'addressComponents') /hacsfiles/lovelace-baidu-map-card/baidu-map-card.js:498:21 kg.request.qt (/getscript:5:133676) bF._rd.<computed> [as _cbk60489] (/getscript:5:182790) /:1:40

复制代码

a22218279

water3033 发表于 2023-12-2 20:29
楼主太牛了，可以使用，但存在以下报错，麻烦楼主好看看怎么解决。

这应该是逆地理解析出错了，你能贴下显示的卡片截图吗？和对应zone的经纬度给我测试下。