🗺️ 地图指挥官

腾讯地图统一协作技能中心 - v2.0

让每一次位置探索，都成为一场炫酷的冒险 🚀

---

📋 目录结构

地图指挥官/
├── SKILL.md              # 技能定义文件（当前文件）
├── README.md             # 使用文档
├── assets/              # 资源文件
│   └── css/
│       └── cyberpunk.css  # 赛博朋克主题样式库
├── templates/           # HTML模板
│   └── chat-output.html   # 对话输出模板
├── examples/            # 示例文件
│   ├── poi-search-demo.html    # POI搜索示例
│   ├── route-planning-demo.html # 路线规划示例
│   └── 对话示例.html           # 对话输出示例
└── index.html           # 技能完整文档（可选）

---

🎯 核心定位

地图指挥官 是腾讯地图生态的 统一协作入口，根据用户需求自动选择合适的子技能协调工作。

无论你需要：

• 🌐 地图可视化
• 📍 地址处理
• 🗺️ 路径规划
• 🔍 周边分析

地图指挥官 都能一键搞定！

---

⚡ 子技能体系

1️⃣ tencentmap-jsapi-gl-skill

Web端地图应用开发

功能范围：

• 基础地图展示（2D/3D）
• 地图控件和交互
• 覆盖物：点标记、矢量图形
• 信息窗体和弹窗
• 点聚合和热力图
• 轨迹展示和动画
• 数据可视化（弧线图、散点图）
• 三维模型展示（GLTF/3DTiles）

依赖： TMAP_JSAPI_KEY

---

2️⃣ tencentmap-webservice-skill

WebService API 数据服务

功能范围：

• 地理编码（地址→坐标）
• 逆地理编码（坐标→地址）
• POI搜索（关键词、周边）
• 关键词输入提示
• 路线规划（驾/步/骑/公交）
• 距离矩阵计算
• 天气查询 & IP定位
• 坐标系转换（GPS↔国测局）

依赖： TMAP_WEBSERVICE_KEY

---

3️⃣ tencentmap-lbs-skill

高级位置服务LBS

功能范围：

• POI搜索增强
• 路径规划增强
• 旅游规划
• 周边搜索
• 轨迹数据处理
• 地图数据可视化

依赖： TMAP_WEBSERVICE_KEY

---

🎛️ 智能决策流程

┌───────────────────┐
│   用户需求输入     │
└────────┬──────────┘
         │
         ▼
┌───────────────────┐
│   需求分析         │
│ 前端展示？ → JSAPI│
│ 后端数据？ → WS   │
│ 复杂LBS？ → LBS  │
└────────┬──────────┘
         │
         ▼
┌───────────────────┐
│   技能加载         │
│ 加载对应的子技能   │
│ 验证Key配置       │
└────────┬──────────┘
         │
         ▼
┌───────────────────┐
│   执行任务         │
│ 调用腾讯地图API   │
│ 数据处理          │
└────────┬──────────┘
         │
         ▼
┌───────────────────┐
│   结果呈现         │
│ 整合结果          │
│ 可视化输出        │
└───────────────────┘

---

🔑 Key配置指南

必需的环境变量

| 子技能 | 需要的Key | 说明 | |--------|-----------|------| | tencentmap-jsapi-gl-skill | TMAP_JSAPI_KEY | JS API专用Key | | tencentmap-webservice-skill | TMAP_WEBSERVICE_KEY | WebService专用Key | | tencentmap-lbs-skill | TMAP_WEBSERVICE_KEY | 与WebService共用 |

签名配置（正式Key必需）

如果Key开启了签名校验（SN校验），需要额外配置Secret Key：

# Windows CMD
setx TMAP_SECRET_KEY "你的SecretKey"

# PowerShell
[Environment]::SetEnvironmentVariable('TMAP_SECRET_KEY', '你的SecretKey', 'User')

# 环境变量完整配置
TMAP_JSAPI_KEY=你的JSAPI Key
TMAP_WEBSERVICE_KEY=你的WebService Key
TMAP_SECRET_KEY=你的Secret Key（如果开启了签名校验）

📌 正式环境请到 腾讯位置服务控制台 申请正式Key

---

🎨 对话输出规范

⚠️ 重要：必须生成HTML文件并预览

当用户在对话中调用本技能时，必须生成带有炫酷特效的HTML文件并直接打开预览，而不仅仅是文字或代码。

执行步骤

1. 生成完整的HTML内容（包含DOCTYPE + head（含style） + body）
2. 使用Write工具将HTML保存到workspace（文件名如：map-output.html）
3. 使用preview_url工具打开生成的HTML文件
4. 在回复中简要说明已完成（1-2句话）

❌ 禁止的操作

• 不要返回 ```html 代码块
• 不要在回复中粘贴HTML代码
• 必须生成文件并预览

HTML特效要求

配色方案（赛博朋克）：

• 主色：#00d4ff（青色）
• 副色：#7b2dff（紫色）
• 强调色：#ff00ff（粉色）
• 背景色：#0a0a1a（深蓝黑）

必须包含的动画效果：

1. 渐变文字（background-clip: text）
2. 发光效果（text-shadow / box-shadow）
3. 悬浮动画（transform: translateY + scale）
4. 扫光效果（::before伪元素 + left动画）
5. 脉冲动画（@keyframes pulse）

背景特效：

• 粒子动画（.particles）
• 扫描线（.scan-line）
• 网格线（.grid-bg）

卡片交互：

• 鼠标悬浮3D特效
• 边框发光
• 扫光动画

响应式设计：

• 移动端适配（@media query）

内容区域要求

• 标题区：渐变文字 + 发光效果
• 参数/数据展示：卡片布局 + 交替动画
• 步骤流程：时间线布局 + 连线动画
• 结果展示：网格布局 + 悬浮缩放

示例

用户问： "帮我搜索北京的咖啡馆"

技能响应：

1. 先简要说明："好的！正在为你搜索北京咖啡馆..."
2. 生成完整的HTML内容
3. 使用Write工具保存到 C:\Users\admin\WorkBuddy\2026-05-20-task-11\map-output.html
4. 使用preview_url工具打开该文件
5. 回复："已完成！正在为你预览搜索结果..."

---

🎮 趣味技能

地图指挥官内置了 5个有趣的技能，让地图不只是工具！

1️⃣ 🍽️ 美食雷达

触发词： 美食雷达、附近好吃的

功能： 分析周边美食分布，随机推荐宝藏小店

支持类型： 中餐/火锅/烧烤/日料/西餐/甜品/咖啡

---

2️⃣ 💑 约会神器

触发词： 约会、约会地点

功能： 智能找中间位置，推荐约会好去处

推荐组合： 餐厅+咖啡厅+电影院

---

3️⃣ 🏃 跑步路线

触发词： 跑步、跑步路线

功能： 搜索附近公园绿道，生成跑步路线

路线类型： 折返跑/环形跑

数据展示： 用时 + 卡路里估算

---

4️⃣ 🏠 搬家参谋

触发词： 搬家、宜居指数

功能： 分析周边配套，计算综合宜居指数

分析维度： 超市/医院/学校/地铁全方位分析

---

5️⃣ 🎲 随机探险

触发词： 随机、探险

功能： 随机推荐有趣的地方，说走就走

特色： 每天不一样的惊喜半日游路线

---

📊 使用示例

示例1：POI搜索

用户： "帮我做一个地图页面，显示全国各城市的销售数据"

分析： 需要前端展示 + 数据可视化

行动： 加载 tencentmap-jsapi-gl-skill，使用热力图/散点图展示销售数据

---

示例2：批量地理编码

用户： "把Excel里的地址批量转成坐标"

分析： 需要后端数据处理

行动： 加载 tencentmap-webservice-skill，批量调用地理编码API

---

示例3：路线规划 + POI

用户： "帮我规划从深圳到广州的自驾路线，显示途经景点"

分析： 需要路线规划 + POI搜索

行动：

• 加载 tencentmap-webservice-skill 进行路线规划
• 加载 tencentmap-jsapi-gl-skill 在地图上展示路线和景点标记

---

🔄 备选机制

当API调用失败时...

自动切换到联网搜索（WebSearch）

触发条件

• API返回错误码（status ≠ 0）
• 网络请求超时（> 5秒）
• Key未配置或配置错误
• API配额超限
• 跨域或CORS问题

搜索策略

| API类型 | 搜索策略 | |---------|-----------| | 地理编码失败 | 搜索「地名 + 地址 + 经纬度」 | | POI搜索失败 | 搜索「类型 + 城市 + 推荐」 | | 路线规划失败 | 搜索「起点 → 终点 路线」 | | 天气查询失败 | 搜索「城市 + 天气预报」 | | 其他失败 | 搜索用户原始需求关键词 |

⚠️ 注意事项

联网搜索结果可能不如API精确，仅作为备选。

如果联网搜索也失败，告知用户并建议检查网络或Key配置。

---

🤝 协作原则

1. 单一职责 - 每个子技能做好自己的事，不越界
2. 按需加载 - 只加载需要的子技能，避免资源浪费
3. Key统一管理 - 确认所需的Key已配置，签名校验通过
4. 结果整合 - 多技能协作时，整合各技能结果统一呈现
5. 容错备选 - API失败时自动切换到联网搜索

---

📚 参考文档

• 腾讯位置服务官网
• API文档中心
• 控制台（申请Key）
• JavaScript API GL文档
• WebService API文档

---

📂 更多资源

• 完整样式库： assets/css/cyberpunk.css
• HTML模板： templates/chat-output.html
• 示例文件：
  • examples/poi-search-demo.html - POI搜索示例
  • examples/route-planning-demo.html - 路线规划示例
  • examples/对话示例.html - 对话输出示例

---

🎨 特效预览

打开以下文件查看实际效果：

1. 技能完整文档： index.html
2. POI搜索示例： examples/poi-search-demo.html
3. 路线规划示例： examples/route-planning-demo.html
4. 对话输出示例： examples/对话示例.html

---

📝 更新日志

v2.0.0 (2026-05-20)

• 🎨 重构为模块化结构
  • 提取CSS到独立文件 assets/css/cyberpunk.css
  • 创建HTML模板 templates/chat-output.html
  • 添加示例文件 examples/
• ✨ 增强对话输出规范
  • 强制返回HTML特效
  • 详细的特效要求说明
  • 输出结构示例
• 📚 完善文档
  • 结构化SKILL.md
  • 添加目录结构说明
  • 添加使用示例

v1.0.0 (2026-05-20)

• 🎉 初始版本
• 基础功能实现
• 赛博朋克主题

---

💬 反馈与支持

如果在使用过程中遇到问题，或需要添加新的功能，请随时反馈！

---

让每一次位置探索，都成为一场炫酷的冒险 🚀