宜春市袁州区小区装维人员地图系统

项目介绍

这是一个基于Vue 3和高德地图API开发的小区装维人员地图标点系统，用于宜春市袁州区的小区装维人员管理。系统主要功能包括：

1. 在地图上显示小区位置标点
2. 鼠标悬停或点击小区标点时显示对应装维人员信息
3. 装维人员信息管理（添加、编辑、删除）
4. 小区信息管理（添加、编辑、删除）
5. 支持CSV格式数据导入

技术栈

• Vue 3 + Vite
• Element Plus UI组件库
• 高德地图JavaScript API
• Pinia状态管理
• Vue Router路由管理

安装与运行

前提条件

• Node.js 14.0+
• 高德地图API密钥（需要自行申请）

安装依赖

npm install

配置高德地图API密钥

在 src/views/Home.vue 文件中，找到以下代码行：

const AMap = await AMapLoader.load({
  key: '您的高德地图API密钥', // 需要替换为实际的高德地图API密钥
  version: '2.0',
  plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation']
})

将 '您的高德地图API密钥' 替换为您申请的高德地图API密钥。

开发环境运行

npm run dev

构建生产版本

npm run build

使用说明

地图页面

• 地图页面显示宜春市袁州区地图，并标记所有已添加的小区位置
• 鼠标悬停在小区标记上时，会显示小区名称和对应装维人员信息
• 点击小区标记可查看更详细的装维人员信息
• 点击右上角的"管理系统"按钮可进入管理页面

管理页面

装维人员管理

• 可添加、编辑、删除装维人员信息
• 支持通过CSV文件批量导入装维人员数据
• CSV文件格式要求：必须包含name和phone列，可选包含position列

小区管理

• 可添加、编辑、删除小区信息
• 可为小区分配装维人员
• 支持通过CSV文件批量导入小区数据
• CSV文件格式要求：必须包含name、longitude和latitude列，可选包含address和staffid列

数据存储

系统使用浏览器的localStorage存储数据，数据会保存在用户的浏览器中。如需持久化存储或多用户共享数据，需要进一步开发后端服务。

注意事项

1. 使用前请确保已正确配置高德地图API密钥
2. 添加小区时，请确保经纬度坐标准确
3. 导入数据时，请确保CSV文件格式符合要求