# HandDrawnMap

**Repository Path**: irooit/hand-drawn-map

## Basic Information

- **Project Name**: HandDrawnMap
- **Description**: 本项目基于 Vue 3 等技术开发，通过高德地图 API 展示手绘地图，精准定位导航。其特色在于手绘风格兼具艺术与实用，适用于景区、校园等多场景，可个性化定制地图图标与信息弹窗。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-03-11
- **Last Updated**: 2025-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 高德手绘地图解决方案

## 手绘地图使用场景
- **城市文化探索**：游客凭借它穿梭于历史建筑、特色小店，感受城市底蕴，地图上的简介和插画助力深入了解文化故事。
- **校园新生导航**：新生依此迅速熟悉教学楼、宿舍等，开启大学生活，还能探索校园美景。
- **主题公园游玩**：助家庭规划路线，玩遍游乐设施，其卡通形象受孩子喜爱，增添游玩乐趣。
- **古镇深度游**：游客跟着它探寻古宅、手工作坊，品特色茶饮，领略风土人情，感受古镇魅力。
- **社区活动指南**：方便居民找到活动场地与公共设施，提升社区活动参与度，增强归属感，促进社区文化建设。


## 页面展示
 <img src="./images/image.png" width="220px"/>
 <img src="./images/image01.png" width="220px"/>
 <img src="./images/image02.png" width="220px"/>
 <img src="./images/image03.png" width="220px"/>
 <img src="./images/image04.png" width="220px"/>
 
## 项目概述

本项目基于 **Vue 3**、**Vite**、**Vuex**、**Vue Router**、**Amap（高德地图）**、**Sass**、**Leaflet** 等技术栈，主要用于实现一个 **地图展示手绘功能**。该项目支持按照分类添加地图图标、以及点击图标时显示提示弹窗等功能。

## 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **Vite** - 前端构建工具
- **Vuex** - 状态管理
- **Vue Router** - 路由管理
- **Amap（高德地图）** - 高德地图 API 用于地图显示和交互
- **Sass** - CSS 扩展语言
- **Leaflet** - 开源 JavaScript 地图库，用于实现地图交互功能

## 安装与使用

1. **Node.js 版本要求**：建议使用 **Node.js 20** 或以上版本。
2. **克隆项目**：

   ```bash

   git clone <项目仓库地址>
   cd <项目文件夹>
   ```
## 项目目录结构 
```

├── public/ # 公共文件（静态资源）
├── dist/ # 打包文件
├── src/ # 源代码
│ ├── assets/ # 静态资源（图片、样式等）
│ ├── components/ # Vue 组件
│ ├── router/ # 路由
│ ├── store/ # Vuex 状态管理
│ ├── views/ # 页面视图
│ └── main.js # 入口文件
├── package.json # 项目配置文件
├── vite.config.js # Vite 配置文件
└── README.md # 项目说明文件
```
## 联系作者
微信：

<img src="./images/WeChat.jpg" width="300px"/>