更新记录

1.0.0（2025-10-31） 下载此版本

1. 使用 UniApp 内置的
2. 可视化展示物流轨迹路线，通过折线连接各个物流节点；
3. 不同类型的节点使用不同颜色的标记（起点、途经点、当前位置）；
4. 地图下方有图例说明，帮助用户理解标记含义

平台兼容性

其他

# First Extension For HBuilderX

开发文档参考：https://hx.dcloud.net.cn

物流追踪插件的主要特点如下：

地图展示功能

使用 UniApp 内置的

数据模拟增强

为每个物流节点添加经纬度信息，用于地图定位 模拟从上海到北京的物流路线（不同状态有不同的路线长度） 生成的物流数据同时支持时间轴展示和地图展示

Vue3 特性应用

使用 语法和 Composition API 使用 onReady 生命周期钩子处理地图初始化 响应式数据管理确保地图和时间轴数据同步更新

使用说明

地图标记图标：需要在项目的 static 目录下添加三个标记图标：

map-marker-green.png（起点标记） map-marker-blue.png（途经点标记） map-marker-red.png（当前位置标记） 页面跳转：从订单页面跳转时传递物流参数：

运行

uni.navigateTo({
  url: `/pages/logistics/LogisticsTracking?logisticsNo=SF1234567890123&companyCode=SF&companyName=顺丰速运`
});

扩展真实数据：

如果要对接真实接口，只需修改 generateMockData 方法，从接口获取包含经纬度的物流数据，然后调用 generateMapData 方法更新地图展示。 这个实现不仅提供了传统的物流时间轴追踪，还通过地图可视化直观展示了包裹的运输路线，让用户能更清晰地了解物流进度。