frontend-miniapp/docs/MAP_COORDINATES_GUIDE.md

深圳自然博物馆地图配置说明

地图中心坐标

当前使用的是示例坐标，需要替换为实际的深圳自然博物馆坐标。

如何获取实际坐标

1. 使用腾讯地图拾取坐标工具

   • 访问：https://lbs.qq.com/getPoint/
   • 搜索"深圳自然博物馆"
   • 点击地图上的建筑位置
   • 复制经纬度坐标

2. 使用高德地图坐标拾取

   • 访问：https://lbs.amap.com/tools/picker
   • 搜索并定位博物馆
   • 获取坐标（需转换为 GCJ-02 坐标系）

建筑外围标记配置

在 TencentMap.vue 中的 polygons 数组配置建筑轮廓：

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. 简化轮廓

   • 如果建筑形状复杂，可以简化为矩形或多边形
   • 只需标记主要的转角点

标记点配置

博物馆主标记

{
  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'
  }
}

入口标记

{
  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. 添加内部标记点

示例：矩形建筑

// 假设建筑是一个矩形，长 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
}]