110 lines
2.6 KiB
Markdown
110 lines
2.6 KiB
Markdown
# 地图标记图标说明
|
||
|
||
## 图标列表
|
||
|
||
### 用户定位标记
|
||
- **文件**: `marker-user-location.svg`
|
||
- **样式**: 黑色圆圈 + 黄色定位针 + 半透明外圈
|
||
- **尺寸**: 40×40px
|
||
- **用途**: 显示用户当前位置
|
||
- **特点**:
|
||
- 外圈半透明黑色（opacity: 0.2）
|
||
- 内圈黑色，黄色边框
|
||
- 中心黄色指针图标
|
||
|
||
### 博物馆主标记
|
||
- **文件**: `marker-museum.svg`
|
||
- **样式**: 黄色圆形 + 博物馆建筑图标
|
||
- **尺寸**: 40×40px
|
||
- **用途**: 标记博物馆主建筑位置
|
||
- **特点**: 黄色背景，黑色建筑图标
|
||
|
||
### 入口标记
|
||
- **文件**: `marker-entrance.svg`
|
||
- **样式**: 黑色圆点 + 白色边框
|
||
- **尺寸**: 30×30px
|
||
- **用途**: 标记入口位置
|
||
|
||
### 展厅标记
|
||
- **文件**: `marker-hall.svg`
|
||
- **样式**: 红色圆点 + 白色边框
|
||
- **尺寸**: 30×30px
|
||
- **用途**: 标记展厅位置
|
||
- **颜色**: #FF6B6B
|
||
|
||
### 展品标记
|
||
- **文件**: `marker-exhibit.svg`
|
||
- **样式**: 青色圆点 + 白色边框
|
||
- **尺寸**: 30×30px
|
||
- **用途**: 标记展品位置
|
||
- **颜色**: #5ED0E4
|
||
|
||
### 设施标记
|
||
- **文件**: `marker-facility.svg`
|
||
- **样式**: 绿色圆点 + 白色边框
|
||
- **尺寸**: 30×30px
|
||
- **用途**: 标记设施位置（洗手间、咖啡厅等）
|
||
- **颜色**: #4ECDC4
|
||
|
||
### 通用 POI 标记
|
||
- **文件**: `marker-poi.svg`
|
||
- **样式**: 青色圆点 + 白色边框
|
||
- **尺寸**: 30×30px
|
||
- **用途**: 通用兴趣点标记
|
||
|
||
## 标记 ID 规范
|
||
|
||
- **0**: 博物馆主标记
|
||
- **1-99**: 入口标记
|
||
- **100-199**: 展厅标记
|
||
- **200-299**: 展品标记
|
||
- **300-399**: 设施标记
|
||
- **999**: 用户当前位置（动态添加）
|
||
|
||
## 使用说明
|
||
|
||
### 添加标记
|
||
|
||
```typescript
|
||
markers.value.push({
|
||
id: 101,
|
||
latitude: 22.692863,
|
||
longitude: 114.363687,
|
||
iconPath: '/static/icons/marker-hall.svg',
|
||
width: 30,
|
||
height: 30,
|
||
title: '2号展厅',
|
||
callout: {
|
||
content: '2号展厅',
|
||
display: 'BYCLICK',
|
||
padding: 8,
|
||
borderRadius: 4,
|
||
bgColor: '#FF6B6B',
|
||
color: '#FFFFFF',
|
||
fontSize: 12
|
||
}
|
||
})
|
||
```
|
||
|
||
### 用户定位
|
||
|
||
点击定位按钮后，会自动添加用户位置标记（ID: 999），使用 `marker-user-location.svg` 图标。
|
||
|
||
## 设计规范
|
||
|
||
- **圆点标记**: 直径 16px，白色边框 2px
|
||
- **大标记**: 40×40px（用户位置、博物馆主标记）
|
||
- **小标记**: 30×30px（其他所有标记）
|
||
- **边框**: 白色，2px 宽度
|
||
- **阴影**: 可选，用于增强立体感
|
||
|
||
## 颜色方案
|
||
|
||
| 类型 | 颜色代码 | 颜色名称 |
|
||
|------|---------|---------|
|
||
| 强调/当前位置 | #E0E100 | 黄色 |
|
||
| 入口 | #333333 | 黑色 |
|
||
| 展厅 | #FF6B6B | 红色 |
|
||
| 展品 | #5ED0E4 | 青色 |
|
||
| 设施 | #4ECDC4 | 绿色 |
|