chore: initialize frontend miniapp repository

2026-06-09 21:08:45 +08:00
commit a90f63cef0
107 changed files with 60454 additions and 0 deletions
--- a/docs/MAP_COORDINATES_GUIDE.md
+++ b/docs/MAP_COORDINATES_GUIDE.md
@@ -0,0 +1,143 @@
+# 深圳自然博物馆地图配置说明
+
+## 地图中心坐标
+
+当前使用的是示例坐标，需要替换为实际的深圳自然博物馆坐标。
+
+### 如何获取实际坐标
+
+1. **使用腾讯地图拾取坐标工具**
+   - 访问：https://lbs.qq.com/getPoint/
+   - 搜索"深圳自然博物馆"
+   - 点击地图上的建筑位置
+   - 复制经纬度坐标
+
+2. **使用高德地图坐标拾取**
+   - 访问：https://lbs.amap.com/tools/picker
+   - 搜索并定位博物馆
+   - 获取坐标（需转换为 GCJ-02 坐标系）
+
+## 建筑外围标记配置
+
+在 `TencentMap.vue` 中的 `polygons` 数组配置建筑轮廓：
+
+```typescript
+const polygons = ref<Polygon[]>([
+  {
+    points: [
+      { latitude: 22.5433, longitude: 114.0577 },  // 西北角
+      { latitude: 22.5433, longitude: 114.0581 },  // 东北角
+      { latitude: 22.5429, longitude: 114.0581 },  // 东南角
+      { latitude: 22.5429, longitude: 114.0577 },  // 西南角
+    ],
+    strokeWidth: 3,
+    strokeColor: '#E0E100',  // 黄色边框
+    fillColor: '#E0E10020',  // 半透明黄色填充
+    zIndex: 1
+  }
+])
+```
+
+### 配置说明
+
+- **points**: 建筑外围的坐标点数组（按顺时针或逆时针顺序）
+- **strokeWidth**: 边框宽度（像素）
+- **strokeColor**: 边框颜色（十六进制）
+- **fillColor**: 填充颜色（十六进制，最后两位是透明度）
+- **zIndex**: 层级（数值越大越在上层）
+
+### 获取建筑轮廓坐标的方法
+
+1. **手动标记**
+   - 在腾讯地图拾取坐标工具中
+   - 依次点击建筑的各个角点
+   - 记录每个点的经纬度
+
+2. **使用卫星图**
+   - 在地图上切换到卫星视图
+   - 更清晰地看到建筑轮廓
+   - 标记关键点位
+
+3. **简化轮廓**
+   - 如果建筑形状复杂，可以简化为矩形或多边形
+   - 只需标记主要的转角点
+
+## 标记点配置
+
+### 博物馆主标记
+
+```typescript
+{
+  id: 0,
+  latitude: 22.5431,
+  longitude: 114.0579,
+  iconPath: '/static/icons/marker-museum.png',
+  width: 40,
+  height: 40,
+  title: '深圳自然博物馆',
+  callout: {
+    content: '深圳自然博物馆',
+    display: 'ALWAYS',  // 始终显示
+    bgColor: '#E0E100',
+    color: '#000000'
+  }
+}
+```
+
+### 入口标记
+
+```typescript
+{
+  id: 1,
+  latitude: 22.5429,
+  longitude: 114.0579,
+  iconPath: '/static/icons/marker-entrance.png',
+  title: '主入口'
+}
+```
+
+## 需要准备的图标
+
+- `/static/icons/marker-museum.png` - 博物馆主标记（40x40px）
+- `/static/icons/marker-entrance.png` - 入口标记（30x30px）
+- `/static/icons/marker-hall.png` - 展厅标记（25x25px）
+- `/static/icons/marker-exhibit.png` - 展品标记（25x25px）
+
+## 坐标系说明
+
+- **GCJ-02**: 国测局坐标系（火星坐标系）
+- 腾讯地图、高德地图使用此坐标系
+- GPS 原始坐标需要转换
+
+## 调试建议
+
+1. 先设置地图中心点
+2. 调整缩放级别（scale: 18-20）
+3. 添加建筑外围多边形
+4. 微调多边形坐标点
+5. 添加内部标记点
+
+## 示例：矩形建筑
+
+```typescript
+// 假设建筑是一个矩形，长 100 米，宽 80 米
+const centerLat = 22.5431
+const centerLng = 114.0579
+
+// 经纬度偏移量（约 1 度 ≈ 111 公里）
+const latOffset = 0.00045  // 约 50 米
+const lngOffset = 0.00036  // 约 40 米
+
+const polygons = [{
+  points: [
+    { latitude: centerLat + latOffset, longitude: centerLng - lngOffset },
+    { latitude: centerLat + latOffset, longitude: centerLng + lngOffset },
+    { latitude: centerLat - latOffset, longitude: centerLng + lngOffset },
+    { latitude: centerLat - latOffset, longitude: centerLng - lngOffset },
+  ],
+  strokeWidth: 3,
+  strokeColor: '#E0E100',
+  fillColor: '#E0E10020',
+  zIndex: 1
+}]
+```