feat(map): 替换地图标记为三轮车图标
- 在 location.tsx 中导入并使用三轮车图标替代原有加标记点 - 在 trajectory.tsx 中导入并使用同样的三轮车图标替代原有加标记点 - 设置标记图标宽高为 32,确保图标在地图中正确显示和居中 - 统一地图上所有车辆标记使用送快递三轮车图标,提高视觉识别度
This commit is contained in:
@@ -22,6 +22,12 @@
|
|||||||
- 添加图标导入:`import tricycleIcon from '@/assets/icons/delivery_tricycle.png'`
|
- 添加图标导入:`import tricycleIcon from '@/assets/icons/delivery_tricycle.png'`
|
||||||
- markers 添加:`iconPath: tricycleIcon, width: 32, height: 32`
|
- markers 添加:`iconPath: tricycleIcon, width: 32, height: 32`
|
||||||
|
|
||||||
|
4. **修改 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 模块声明,无需额外配置
|
- TypeScript 类型定义已包含 PNG 模块声明,无需额外配置
|
||||||
- 微信小程序 map 组件需要指定 width 和 height 属性
|
- 微信小程序 map 组件需要指定 width 和 height 属性
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import {pageByQQMap, pageHjmCar} from "@/api/hjm/hjmCar";
|
|||||||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||||||
// 导入GPS坐标转换工具
|
// 导入GPS坐标转换工具
|
||||||
import GPS from '@/utils/gpsUtil.js';
|
import GPS from '@/utils/gpsUtil.js';
|
||||||
|
import tricycleIcon from '@/assets/icons/delivery_tricycle.png';
|
||||||
|
|
||||||
export interface Market {
|
export interface Market {
|
||||||
// 自增ID
|
// 自增ID
|
||||||
@@ -240,6 +241,9 @@ function Home() {
|
|||||||
id: item.id,
|
id: item.id,
|
||||||
latitude: markerLat,
|
latitude: markerLat,
|
||||||
longitude: markerLng,
|
longitude: markerLng,
|
||||||
|
iconPath: tricycleIcon,
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
label: {
|
label: {
|
||||||
content: `${item?.code}`,
|
content: `${item?.code}`,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
@@ -312,6 +316,9 @@ function Home() {
|
|||||||
id: data.id,
|
id: data.id,
|
||||||
latitude: displayLat,
|
latitude: displayLat,
|
||||||
longitude: displayLng,
|
longitude: displayLng,
|
||||||
|
iconPath: tricycleIcon,
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
label: {
|
label: {
|
||||||
content: `${data?.code}`,
|
content: `${data?.code}`,
|
||||||
|
|||||||
Reference in New Issue
Block a user