更新记录

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 方法更新地图展示。 这个实现不仅提供了传统的物流时间轴追踪,还通过地图可视化直观展示了包裹的运输路线,让用户能更清晰地了解物流进度。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议