---
title: 交互式地图工坊 (Interactive Map Studio)
emoji: 🗺️
colorFrom: blue
colorTo: indigo
sdk: docker
pinned: false
short_description: 为图片添加交互式热点，一键生成可点击的楼层指引、游戏地图或产品展示图。
---

# 交互式地图工坊 (Interactive Map Studio)

这是一个可视化的交互式地图制作工具，专为不需要编程基础的用户设计。你可以上传任意图片（如楼层平面图、游戏地图、产品拆解图），在图片上添加可点击的“热点”标记，并导出为独立的 HTML 文件或嵌入代码。

## ✨ 主要功能

- **可视化编辑器**：拖拽上传图片，点击即可添加热点。
- **自定义热点**：支持修改图标（FontAwesome）、颜色、标题和描述内容。
- **实时预览**：在编辑过程中随时切换到预览模式，体验最终交互效果。
- **一键导出**：生成包含所有逻辑的单文件 HTML，无需服务器即可部署，或者嵌入到你的网站中。
- **多场景适用**：
  - 🏠 **房产/民宿**：展示房间布局和细节说明。
  - 🎮 **游戏攻略**：标记地图上的资源点、BOSS 位置。
  - 🏢 **商场/展会**：制作楼层指引和展位介绍。
  - 🛍️ **电商详情**：在产品图上标记各个部件的功能。

## 🛠️ 技术栈

- **Frontend**: Vue 3 + Tailwind CSS (via CDN for simplicity)
- **Backend**: Python Flask (Serving static files)
- **Deployment**: Dockerized for Hugging Face Spaces

## 🚀 快速开始

1. 上传一张底图（支持拖拽）。
2. 点击图片任意位置添加热点。
3. 在左侧面板编辑热点的标题、描述、图标和颜色。
4. 点击右上角“导出 HTML”保存成果。

## 📦 部署

本项目已配置 Dockerfile，可直接部署到 Hugging Face Spaces 或任何支持 Docker 的平台。

```bash
# 本地运行
docker build -t interactive-map-studio .
docker run -p 7860:7860 interactive-map-studio
```

## 📄 许可证

MIT License