MultiNavigation - 多点路径规划工具

一个基于高德地图 API 的 Web 应用，支持多组地点管理、批量路径规划、多点路线优化。

功能特性

• 📍 多组地点管理，支持最多 5 个独立地点组，不同颜色标记区分
• 🗺️ 交互式地图，自动定位，地点搜索
• 🚗 4 种交通方式路线规划（驾车、公交、步行、骑行）
• ⚡ 批量路线计算，自动计算从起点到所有其他地点的路线
• 🛣️ 多点最优路线规划，自动计算经过所有地点的最短/最快路线
• 📱 响应式设计，支持桌面和移动设备

使用前提

1. 注册高德地图开发者账号：https://lbs.amap.com/
2. 创建应用并获取 Web 端 JS API 密钥（Key）

安装和运行

开发模式

# 安装依赖
npm install

# 替换 API Key
编辑 index.html 文件，将 YOUR_AMAP_API_KEY 替换为你自己的高德地图 API Key

# 启动开发服务器
npm run dev

访问 http://localhost:3000 即可使用。

生产构建

# 构建生产版本
npm run build

构建产物会生成在 dist 目录下，直接部署到任何静态文件服务器即可使用，也可以直接打开 dist/index.html 本地使用。

使用说明

1. 添加地点组

• 在左侧输入框中输入地点列表，每行一个地点
• 点击「添加地点组」按钮，系统会自动搜索每个地点并在地图上标记
• 每个地点组使用不同颜色的标记区分，最多支持 5 个地点组

2. 路径规划

• 点击地图上的任意标记点作为起点
• 系统会自动计算从起点到所有其他地点的路线，包含4种交通方式的距离和时间
• 点击右侧路线列表中的任意项，可以在地图上显示具体路线

3. 多点最优路线

• 添加至少2个地点后，点击「计算最优路线（经过所有地点）」按钮
• 系统会自动计算经过所有地点的最优路线（驾车模式），显示总距离和预计时间，并在地图上渲染完整路线

4. 分组管理

• 可以点击分组卡片上的「显示/隐藏」按钮切换该组标记的可见性
• 可以点击「删除」按钮删除整个分组

技术栈

• 原生 JavaScript (无前端框架)
• Tailwind CSS (CDN)
• 高德地图 JS API v2.0
• Vite (构建工具)

注意事项

• 本工具所有计算都在浏览器端完成，无需后端服务器
• 高德地图 API 有请求频率限制，批量计算路线时可能会有延迟
• API Key 请妥善保管，不要公开分享到公网
• 本工具仅供学习和个人使用，请勿用于商业用途