feat(map): 替换地图标记为三轮车图标
- 在 location.tsx 中导入并使用三轮车图标替代原有加标记点 - 在 trajectory.tsx 中导入并使用同样的三轮车图标替代原有加标记点 - 设置标记图标宽高为 32,确保图标在地图中正确显示和居中 - 统一地图上所有车辆标记使用送快递三轮车图标,提高视觉识别度
This commit is contained in:
28
.workbuddy/memory/2026-05-07.md
Normal file
28
.workbuddy/memory/2026-05-07.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# 2026-05-07 工作记忆
|
||||
|
||||
## 地图标记图标修改
|
||||
|
||||
### 任务
|
||||
将地图上的小红点改成送快递的三轮车图标
|
||||
|
||||
### 修改内容
|
||||
|
||||
1. **创建三轮车图标**
|
||||
- 位置:`src/assets/icons/delivery_tricycle.png`
|
||||
- 尺寸:64x64 透明背景 PNG
|
||||
- 设计:红色车身、绿色货箱的三轮快递车
|
||||
|
||||
2. **修改 location.tsx**
|
||||
- 文件:`src/hjm/location.tsx`
|
||||
- 添加图标导入:`import tricycleIcon from '@/assets/icons/delivery_tricycle.png'`
|
||||
- markers 添加:`iconPath: tricycleIcon, width: 32, height: 32`
|
||||
|
||||
3. **修改 trajectory.tsx**
|
||||
- 文件:`src/hjm/trajectory/trajectory.tsx`
|
||||
- 添加图标导入:`import tricycleIcon from '@/assets/icons/delivery_tricycle.png'`
|
||||
- markers 添加:`iconPath: tricycleIcon, width: 32, height: 32`
|
||||
|
||||
### 注意事项
|
||||
- TypeScript 类型定义已包含 PNG 模块声明,无需额外配置
|
||||
- 微信小程序 map 组件需要指定 width 和 height 属性
|
||||
- 图标居中显示在车辆 GPS 坐标位置
|
||||
BIN
src/assets/icons/delivery_tricycle.png
Normal file
BIN
src/assets/icons/delivery_tricycle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 704 B |
@@ -5,8 +5,8 @@ import {Button, Input} from '@nutui/nutui-react-taro'
|
||||
import {useRouter} from '@tarojs/taro'
|
||||
import {getHjmCarByCode} from "@/api/hjm/hjmCar";
|
||||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||||
// 导入整个GPS对象,因为gpsUtil.js导出的是一个对象而不是命名导出
|
||||
import GPS from '@/utils/gpsUtil.js';
|
||||
import tricycleIcon from '@/assets/icons/delivery_tricycle.png';
|
||||
import './location.scss'
|
||||
|
||||
/**
|
||||
@@ -344,7 +344,9 @@ const Location = () => {
|
||||
id: 1,
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
iconPath: '',
|
||||
iconPath: tricycleIcon,
|
||||
width: 32,
|
||||
height: 32,
|
||||
label: {
|
||||
content: item.code || '',
|
||||
color: '#ffffff',
|
||||
|
||||
@@ -7,8 +7,8 @@ import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||||
import './trajectory.scss'
|
||||
import {pageHjmGpsLog} from "@/api/hjm/hjmGpsLog";
|
||||
import {formatCurrentDate, getCurrentHour} from "@/utils/time";
|
||||
// 导入GPS坐标转换工具
|
||||
import GPS from '@/utils/gpsUtil.js';
|
||||
import tricycleIcon from '@/assets/icons/delivery_tricycle.png';
|
||||
|
||||
/**
|
||||
* 文章终极列表
|
||||
@@ -313,6 +313,9 @@ const Location = () => {
|
||||
},
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
iconPath: tricycleIcon,
|
||||
width: 32,
|
||||
height: 32,
|
||||
// @ts-ignore
|
||||
name: '位置'
|
||||
}]}
|
||||
|
||||
Reference in New Issue
Block a user