- 在 location.tsx 中导入并使用三轮车图标替代原有加标记点 - 在 trajectory.tsx 中导入并使用同样的三轮车图标替代原有加标记点 - 设置标记图标宽高为 32,确保图标在地图中正确显示和居中 - 统一地图上所有车辆标记使用送快递三轮车图标,提高视觉识别度
1.3 KiB
1.3 KiB
2026-05-07 工作记忆
地图标记图标修改
任务
将地图上的小红点改成送快递的三轮车图标
修改内容
-
创建三轮车图标
- 位置:
src/assets/icons/delivery_tricycle.png - 尺寸:64x64 透明背景 PNG
- 设计:红色车身、绿色货箱的三轮快递车
- 位置:
-
修改 location.tsx
- 文件:
src/hjm/location.tsx - 添加图标导入:
import tricycleIcon from '@/assets/icons/delivery_tricycle.png' - markers 添加:
iconPath: tricycleIcon, width: 32, height: 32
- 文件:
-
修改 trajectory.tsx
- 文件:
src/hjm/trajectory/trajectory.tsx - 添加图标导入:
import tricycleIcon from '@/assets/icons/delivery_tricycle.png' - markers 添加:
iconPath: tricycleIcon, width: 32, height: 32
- 文件:
-
修改 pages/index/index.tsx(首页)
- 文件:
src/pages/index/index.tsx - 添加图标导入:
import tricycleIcon from '@/assets/icons/delivery_tricycle.png' - 第 244 行和第 319 行的 markers 添加:
iconPath: tricycleIcon, width: 32, height: 32 - 该文件有两处设置 markers(pageHjmCarByMap 函数和 reload 函数)
- 文件:
注意事项
- TypeScript 类型定义已包含 PNG 模块声明,无需额外配置
- 微信小程序 map 组件需要指定 width 和 height 属性
- 图标居中显示在车辆 GPS 坐标位置