frontend-miniapp/docs/MAP_MARKERS_GUIDE.md

地图标记图标说明

图标列表

用户定位标记

• 文件: 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: 用户当前位置（动态添加）

使用说明

添加标记

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	绿色