README.md

metadata

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 的平台。

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

📄 许可证

MIT License