🗺️ Pathfinder

一个使用 Next.js 15、MapboxGL 和 TypeScript 构建的现代交互式地图应用。Pathfinder 提供无缝的地图体验，功能包括实时天气数据、位置搜索和可自定义的地图样式。

演示 · 报告错误 · 请求功能

✨ 功能

🌓 支持暗黑/明亮模式
🏢 3D 建筑可视化
🔍 带自动补全的地点搜索
🌤️ 实时天气信息
📍 当前定位检测
🛰️ 街景/卫星视图切换
📱 完全响应式设计
⌨️ 支持键盘快捷键
🎨 使用 Tailwind CSS 和 shadcn/ui 的现代界面

🚀 快速开始

先决条件

Node.js 22 及以上版本
一个 Mapbox API 密钥（从 Mapbox 获取）
一个 OpenWeather API 密钥（从 OpenWeather 获取）
npm 或 yarn

安装

克隆仓库：

git clone https://github.com/shadowoff09/pathfinder.git
cd pathfinder

安装依赖项：

npm install
or
yarn install

设置环境变量：
将 .env.example 文件复制为 .env.local：

     cp .env.example .env.local
     ``
   打开 .env.local 并添加你的 Mapbox API 密钥：

     
`env
     NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=your_mapbox_token_here
     NEXT_PUBLIC_WEATHER_API_KEY=your_weather_api_key_here
     `
   从以下网站获取您的API密钥：
     Mapbox - 用于地图功能
     OpenWeather - 用于天气数据
启动开发服务器：

bash
npm run dev
or
yarn dev


在浏览器中打开 http://localhost:3000。
🎮 使用说明
地图导航
平移：点击并拖动
缩放：滚动或使用缩放控件
旋转：右键点击并拖动
重置视图：按 Ctrl+Q
功能
使用搜索栏搜索地点
切换街道和卫星视图
在街道视图模式下查看3D建筑（缩放级别15+）
查看天气信息（缩放级别14+）
一键获取当前位置
复制坐标到剪贴板
🛠️ 构建工具
Next.js 15 - React 框架
TypeScript - 类型安全
Mapbox GL JS - 地图 API
Tailwind CSS - 样式
shadcn/ui - UI 组件
React Map GL - Mapbox GL 的 React 封装
🤝 贡献
欢迎贡献！请随时提交拉取请求。对于重大更改，请先打开 issue 讨论您想要更改的内容。