html本身不能直接绘制地图路线，因为svg的只接受像素坐标，而地理数据是经纬度，必须经web墨卡托投影转换、缩放计算后才能正确映射。
直接说结论：HTML 本身不能绘制地图路线，<path></path> 是 SVG 元素，必须配合地理坐标转换 + 投影计算才能在地图上画出有意义的路线；硬塞经纬度进 <path d="..."></path> 会跑到南极或空白处。
为什么不能直接用 SVG <path></path> 画地图路线
因为 <path></path> 的 d 属性只认像素坐标（x/y），而地图路线数据是经纬度（lat/lng）。没做投影转换就直接把 [116.48, 39.99] 当成 cx/cy 塞进去，结果不是偏移几百公里，就是缩在左上角一个点。
- Web 地图通用投影是 Web 墨卡托（EPSG:3857），需用公式把经纬度转成米制坐标
- 再根据当前地图视图范围（bounds）和画布尺寸，算出每米对应多少像素（scale）
- 最后才是把每个点映射为
M x1 y1 L x2 y2 ...这样的d字符串
Leaflet 中怎么用 SVG <path></path> 绘制自定义路线
Leaflet 内部用 SVG 渲染矢量图层，但你不该手动拼 <path></path>，而是用 L.polyline() —— 它自动完成投影、缩放适配和重绘逻辑。
- 传入坐标数组时注意顺序：
[[lat, lng], [lat, lng]]，不是[lng, lat] - 如果要用 SVG 属性微调（比如虚线、描边宽度），通过
weight、dashArray、lineCap等选项传给L.polyline()，别碰底层<path></path>元素 - 想加箭头？Leaflet 不原生支持，得用
L.polylineDecorator插件，或改用L.canvasOverlay手动 draw
高德/百度地图 JS API 里怎么画路线而不是调用 AMap.Driving
如果你已有路线坐标点（比如从后端返回的 GeoJSON LineString），不想走官方路径规划插件，而是自己画线，那就绕过 AMap.DirectionsDriving，直接用 AMap.Polyline 或 BMap.Polyline。
- 高德：确保坐标是 GCJ02（国内标准），不是 WGS84；传入
[[lng, lat], [lng, lat]]格式（注意：这里是 lng 在前） - 百度：必须是 BD09 坐标系；用
BMap.Convertor.translate()转换原始 GPS 坐标，否则线会漂移 500 米以上 - 两者都支持
strokeColor、strokeWeight、strokeOpacity控制样式，但不支持 CSS 动画，如需流动效果得用 Canvas 模拟
Canvas 上手写 <path></path> 类似逻辑要防哪些坑
Canvas 没有 <path></path> 标签，但你可以用 ctx.moveTo() + ctx.lineTo() 模拟。难点不在画线，而在坐标映射是否随缩放/平移动态更新。
- 每次重绘前必须清空画布（
ctx.clearRect()），否则旧路线残留 - y 轴要翻转：
canvasY = height - (projectedY - south) * scale，漏掉这步线会倒着长 - 缩放时别重新解析 GeoJSON 数据，只更新
bounds和重算scale，否则卡顿 - 鼠标点击判断是否在线上？别用像素遍历，用 @turf/distance 计算点到线段的最短距离（单位：米）更可靠
真正麻烦的从来不是“怎么画一条线”，而是“这条线在不同缩放级别下是否始终贴合真实道路”，坐标系、投影、容器尺寸、重绘时机——任何一个环节错位，路线就飞了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
