# 地图热点展示

**Repository Path**: zhangdingqu/map-hotspot-display

## Basic Information

- **Project Name**: 地图热点展示
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-01
- **Last Updated**: 2025-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 地图热点展示系统

一个功能完整的地图热点展示和管理系统，支持在图片上绘制热点、编辑热点信息、悬浮提示、弹窗显示等功能。

## 🌟 主要功能

### 1. 热点展示
- **半透明热点框**：在图片上显示蓝色半透明的热点区域
- **悬浮提示**：鼠标悬停在热点上显示备注信息
- **点击弹窗**：点击热点显示详细信息弹窗
- **复制功能**：一键复制热点信息到剪贴板

### 2. 编辑模式
- **绘制新热点**：在图片上拖拽绘制新的热点区域
- **移动热点**：直接拖拽热点可以移动位置
- **删除热点**：鼠标悬停显示删除按钮(X)
- **编辑热点**：双击热点编辑备注信息（支持多行文本）
- **实时预览**：绘制过程中显示实时预览框

### 3. 图片管理
- **添加图片**：支持文件上传和剪贴板粘贴
- **删除图片**：删除图片时自动删除相关热点
- **剪贴板上传**：支持截图、复制的图片直接粘贴

### 4. 数据管理
- **热点编辑器**：批量编辑所有热点信息
- **备份管理**：自动备份和恢复数据
- **JSON导出**：将数据保存为JSON文件
- **Dreamweaver兼容**：支持在Dreamweaver中编辑热点

## 🚀 快速开始

### 系统要求
- **浏览器**：Chrome 60+、Firefox 55+、Safari 12+、Edge 79+
- **操作系统**：Windows、macOS、Linux
- **网络**：无需网络连接，完全离线运行

### 1. 启动项目

#### 方法一：直接打开（推荐）
1. 下载项目文件到本地
2. 双击 `地图.html` 文件
3. 浏览器会自动打开网页

#### 方法二：使用Python服务器（推荐）
1. **简单启动**：双击运行 `start.bat` 文件（英文界面，避免乱码）
2. **中文界面**：双击运行 `start_server.bat` 文件（如果出现乱码，请使用start.bat）
3. **命令行启动**：
   ```bash
   # 安装依赖
   pip install -r requirements.txt
   
   # 启动服务器
   python server.py
   ```
4. 在浏览器中访问：`http://localhost:8000`

#### 方法三：使用简单HTTP服务器
1. 打开命令行终端
2. 进入项目目录
3. 启动HTTP服务器：
   ```bash
   # Python 3
   python -m http.server 8000
   
   # Python 2
   python -m SimpleHTTPServer 8000
   
   # Node.js (需要安装http-server)
   npx http-server
   ```
4. 在浏览器中访问：`http://localhost:8000/地图.html`

#### 方法四：使用VS Code Live Server
1. 在VS Code中安装"Live Server"扩展
2. 右键点击 `地图.html` 文件
3. 选择"Open with Live Server"

### 2. 基本操作
- **查看热点**：鼠标悬停在蓝色热点区域查看提示
- **点击热点**：点击热点查看详细信息并复制
- **编辑模式**：点击右上角"🎨 编辑模式"按钮进入编辑模式

### 3. 编辑模式使用
1. 点击"🎨 编辑模式"按钮
2. 在图片上拖拽绘制新热点区域
3. 直接拖拽现有热点可以移动位置
4. 双击热点编辑备注信息
5. 按ESC键或点击按钮退出编辑模式

### 4. 管理功能
- **添加图片**：点击"添加图片"按钮
- **编辑热点**：点击"编辑热点"按钮批量编辑
- **保存数据**：点击"保存到JSON"按钮导出数据

## 📁 文件结构

```
map-hotspot-display/
├── 地图.html              # 主页面文件
├── server.py              # Python服务器文件
├── requirements.txt       # Python依赖文件
├── start.bat              # 简单启动脚本（英文界面）
├── start_server.bat       # 中文启动脚本
├── map_hotspots_data.json # 热点数据文件（自动生成）
├── IMG/                   # 图片文件夹
│   ├── 1.png
│   ├── 3.png
│   ├── 4.png
│   ├── 5.png
│   └── wechat_2025-09-01_153533_589.png
└── README.md              # 项目说明文件
```

## 🎯 技术特点

### 前端技术
- **纯HTML/CSS/JavaScript**：无需额外依赖
- **响应式设计**：适配不同屏幕尺寸
- **现代UI**：美观的界面设计和交互效果

### 功能特性
- **实时绘制**：拖拽绘制热点，实时预览
- **多行文本编辑**：支持复杂的热点信息输入
- **数据持久化**：JSON格式保存和加载
- **离线模式**：服务器不可用时仍可正常使用
- **自动备份**：定期自动备份数据
- **剪贴板支持**：图片直接粘贴上传
- **错误处理**：完善的错误提示和恢复机制

### 兼容性
- **Dreamweaver兼容**：支持在Dreamweaver中编辑
- **现代浏览器**：支持Chrome、Firefox、Safari、Edge
- **移动端适配**：响应式设计支持移动设备

## 🔧 高级功能

### 1. Dreamweaver编辑模式
- 点击"Dreamweaver编辑模式"按钮
- 隐藏可视化热点层，显示原始map标签
- 可在Dreamweaver中直接编辑热点坐标

### 2. 剪贴板上传
- 复制图片到剪贴板
- 在添加图片页面点击上传区域或按Ctrl+V
- 自动生成文件名并预览

### 3. 数据持久化
- 点击"💾 保存所有数据"按钮
- 数据同时保存到浏览器localStorage和项目目录的JSON文件
- 支持数据备份和迁移
- 页面刷新后自动从服务器加载数据
- 支持离线模式，服务器不可用时仍可正常使用

## 📝 使用说明

### 热点信息格式
热点信息支持多行文本，建议包含：
- 功能描述
- 文件路径
- 定位选择器
- 其他相关信息

### 快捷键
- **ESC**：退出绘制模式，关闭弹窗
- **Ctrl+V**：在添加图片页面粘贴剪贴板图片

### 注意事项
- 绘制热点时确保区域足够大，便于后续编辑
- 删除图片会同时删除该图片上的所有热点
- 建议定期保存数据到JSON文件

### 故障排除

#### 1. 图片无法显示
- 确保IMG文件夹中的图片文件完整
- 检查图片文件名是否正确
- 尝试使用本地服务器启动项目

#### 2. 热点功能不工作
- 确保浏览器支持JavaScript
- 检查浏览器控制台是否有错误信息
- 尝试刷新页面或清除浏览器缓存

#### 3. 剪贴板上传不工作
- 确保浏览器支持剪贴板API
- 检查是否允许了剪贴板权限
- 尝试使用文件上传功能替代

#### 4. 数据保存失败
- 确保浏览器支持下载功能
- 检查是否有足够的磁盘空间
- 尝试使用不同的浏览器
- 检查Python服务器是否正常运行
- 查看浏览器控制台的错误信息

### 5. 服务器连接问题
- 确保Python服务器正在运行
- 检查端口8000是否被占用
- 尝试重启服务器
- 查看服务器控制台的错误信息

## 🎨 界面预览

系统包含以下主要界面：
- 主展示页面：显示图片和热点
- 绘制模式：黄色虚线热点框，支持编辑
- 添加图片模态框：支持文件上传和剪贴板
- 热点编辑器：批量编辑热点信息
- 热点信息编辑：多行文本编辑界面

## 📞 技术支持

如有问题或建议，请通过以下方式联系：
- 项目地址：https://gitee.com/zhangdingqu/map-hotspot-display.git
- 提交Issue：在Gitee仓库中提交问题反馈

---

**版本**：v1.0.0  
**更新时间**：2025-01-27  
**作者**：zhangdingqu