一个纯前端静态校园地图网页，全程采用重庆大学官方蓝白主题配色。底图使用百度地图，坐标数据统一采用高德 GCJ02 坐标系，弹窗支持一键跳转百度地图 / 高德地图导航。
如果你想在本地部署，可看以下教程。
| 能力 | 选型 | 说明 |
|---|---|---|
| 页面结构 | HTML5 | 原生语义化标签 |
| 样式 | Tailwind CSS CDN + 内嵌自定义样式 | 统一管控蓝白主题 |
| 地图引擎 | 百度地图 JavaScript API v3.0 | 需AK密钥（免费申请） |
| 图标 | Font Awesome 4.7 | 在线 CDN（cdnjs 源） |
| 交互逻辑 | 原生 JavaScript（IIFE） | 不依赖前端框架 |
百度地图 JS API 需要申请免费 AK 密钥，申请教程见下方「第二节」。
百度地图 JS API 需要一个免费的 AK 密钥才能使用。以下是申请步骤：
访问 https://lbsyun.baidu.com，使用百度账号登录。如果没有百度账号，先注册一个。
登录后点击右上角「控制台」→「应用管理」→「我的应用」。
或直接访问：https://lbsyun.baidu.com/apiconsole/key
点击「创建应用」，填写以下信息：
| 字段 | 填写内容 |
|---|---|
| 应用名称 | CQU Maps（自定义） |
| 应用类型 | 浏览器端 |
| 启用服务 | 勾选「JavaScript API」 |
| Referer白名单 | *（或填写你的域名/IP，本地开发填 *） |
创建成功后，会看到一串 32 位字符的 AK 密钥，形如 aBcDeFgHiJkLmNoPqRsTuVwXyZ123456。
打开 index.html，找到百度地图 script 标签：
<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=YOUR_BAIDU_MAP_AK"></script>将 YOUR_BAIDU_MAP_AK 替换为你的 AK 密钥，保存后刷新页面即可。
MAP/
├── index.html # 页面骨架，引入百度地图JS API + Tailwind + FontAwesome
├── js/
│ ├── data.js # 全部校园建筑坐标数据（GCJ02坐标系，数组格式）
│ ├── reviews.js # 附近美食正式评论（审核通过，由 server.ps1 自动维护）
│ ├── pending_reviews.js # 附近美食待审核评论（暂存，由 server.ps1 自动维护）
│ ├── main.js # 百度地图初始化、坐标转换、检索、弹窗、导航跳转
│ └── admin.js # 管理后台逻辑（登录、审核、修改、删除、上传）
├── admin.html # 管理后台页面（/cqumaps/admin）
├── 校徽_蓝色.svg # 网页标签页图标（favicon）
├── cartoon.jpg # 贡献者弹窗中的开发者头像
├── server.ps1 # PowerShell 静态服务器 + 评分评论 API（file://受限时备用）
└── README.md # 本说明文档
- 按上方「第二节」申请百度地图 AK 密钥。
- 打开 index.html，将
YOUR_BAIDU_MAP_AK替换为你的密钥。 - 双击
index.html，或使用本地服务器打开http://localhost:2345。
推荐浏览器：Chrome 90+ / Edge 90+ / Safari 14+。
如果双击打开后百度地图无法加载（部分浏览器限制 file:// 协议），使用 PowerShell 启动本地服务器：
cd D:\code\MAP
powershell -ExecutionPolicy Bypass -File .\server.ps1然后浏览器访问 http://localhost:2345。
本项目统一使用 GCJ02（高德/火星坐标系） 存储坐标数据。百度地图底图通过 gcj02ToBd09() 函数自动转换为 BD09 坐标系显示，高德导航直接使用原始 GCJ02 坐标。
| 坐标系 | 使用方 | 本项目中的角色 |
|---|---|---|
| GCJ02 | 高德地图 | data.js 中统一使用（原始存储格式） |
| BD09 | 百度地图 | 由 GCJ02 自动转换而来（地图显示 + 百度导航跳转） |
核心机制：data.js 中存储 GCJ02 坐标，main.js 通过 gcj02ToBd09() 转换后用于百度地图显示和百度导航跳转，高德导航直接使用原始坐标。你只需从高德地图拾取坐标填入即可，无需手动转换。
打开 高德地图拾取坐标系统：
- 搜索或缩放至目标建筑。
- 在建筑中心位置点击鼠标左键。
- 页面显示的文本形如
106.306933,29.604076，即「经度,纬度」（GCJ02）。 - 填入 data.js 的
coord字段，格式为数组[经度, 纬度]。
注意：高德地图拾取结果为「经度在前,纬度在后」，与 data.js 中
coord数组格式[经度, 纬度]完全一致。坐标系转换、URI 拼接等已在 main.js 内部统一处理。
- 顶部导航栏蓝底白字，校区下拉框支持 虎溪校区/A区/B区/C区/两江校区
- 左侧侧边栏分类筛选标签齐全（全部/教学楼/学生宿舍/食堂/图书馆/运动场馆/行政楼/校门/校医院/剧场/校车站/地标建筑/学院楼/附近美食/快递点）
- 切换分类标签，地图 marker 与侧边栏列表同步刷新
- 点击侧边栏建筑条目，地图平滑跳转至点位并自动弹窗
- 点击地图 marker，弹出建筑信息卡片
- 弹窗内「百度地图导航」按钮（BD09坐标）+「高德地图导航」按钮（GCJ02坐标）
- 顶部搜索框实时模糊检索
- 切换校区后地图中心点、缩放、列表、marker 全部同步切换
- 桌面端侧边栏常驻左侧（320px）
- 移动端侧边栏折叠为抽屉，汉堡按钮+遮罩
- 不同分类 marker 颜色符合色彩规范
- 侧边栏底部「使用说明」+「贡献者」入口及模态弹窗
- 网页标签页显示重大校徽图标
- 控制台无 JS 代码错误
- 开发者贡献者弹窗
- 开发评论区功能
- 完善点位数据
只需编辑 js/data.js 一个文件。
{
id: 'd_teaching_09', // 唯一ID（校区_分类_编号）
name: '新建教学楼', // 建筑全称
category: 'teaching', // 分类：见下方对照表
campus: 'd', // 校区：d/a/b/c/e
coord: [106.4530, 29.5800], // 高德地图拾取 [经度, 纬度]（GCJ02）
desc: '新建成智慧教学楼。' // 简短介绍
}| 分类标识 | 显示名称 | 标记颜色 | 图标 |
|---|---|---|---|
teaching |
教学楼 | #003375 | fa-graduation-cap |
dormitory |
学生宿舍 | #4069B2 | fa-building |
canteen |
食堂 | #6296D8 | fa-cutlery |
library |
图书馆 | #00285C | fa-book |
sports |
运动场馆 | #8CB4E8 | fa-futbol-o |
admin |
行政楼 | #003375 | fa-briefcase |
gate |
校门 | #4069B2 | fa-flag |
hospital |
校医院 | #6296D8 | fa-hospital-o |
theater |
剧场 | #2F5599 | fa-ticket |
busstation |
校车站 | #5A82B8 | fa-bus |
landmark |
地标建筑 | #003375 | fa-star |
college |
学院楼 | #1A4A8A | fa-university |
food |
附近美食 | #7BA8E0 | fa-coffee |
express |
快递点 | #4A7CC0 | fa-archive |
保存后刷新页面即可。
const CAMPUS_CONFIG = {
d: { name: '虎溪校区', coord: [106.305322, 29.602937], zoom: 16 },
a: { name: 'A区', coord: [106.475693, 29.570419], zoom: 16 },
b: { name: 'B区', coord: [106.467000, 29.572700], zoom: 17 },
c: { name: 'C区', coord: [106.461100, 29.565900], zoom: 17 },
e: { name: '两江校区', coord: [106.816400, 29.746000], zoom: 16 },
// 新增校区按相同格式追加即可
f: { name: '新校区', coord: [经度, 纬度], zoom: 16 }
};
coord为高德地图拾取的坐标数组[经度, 纬度]（GCJ02）。
<option value="f" class="text-cqu-text">新校区</option>| 标识 | 校区名称 |
|---|---|
d |
虎溪校区 |
a |
A区 |
b |
B区 |
c |
C区 |
e |
两江校区 |
弹窗内提供两个导航按钮，点击均在新标签页打开，移动端优先唤起对应 APP。
| 平台 | URI 格式 | 坐标系 | 经纬度顺序 |
|---|---|---|---|
| 百度地图 | http://api.map.baidu.com/marker?location=纬度,经度&title=建筑名称&output=html |
BD09 | 纬度,经度 |
| 高德地图 | https://uri.amap.com/marker?position=经度,纬度&name=建筑名称&callnative=1 |
GCJ02 | 经度,纬度 |
URI 已在
js/main.js的buildPopupHtml()中拼接。百度导航使用gcj02ToBd09()转换后的 BD09 坐标，高德导航直接使用 data.js 中的 GCJ02 坐标。
「附近美食」（category: food）地点弹窗支持打分与评论：
- 评分范围 0 ~ 5 星，最小单位 0.5 星（点击星星左/右半侧选择半星或整星）。
- 填写者名称（昵称）为必填项。
- 用户提交后先进入待审核状态（
js/pending_reviews.js），提示「已收到您的评分，稍后管理员审核后会将您的评分上传系统」。 - 管理员在
/cqumaps/admin审核通过后，记录才会进入js/reviews.js（正式评论），地图上可见。 - 侧边栏美食列表会显示该地点的平均评分与评价数。
| 文件 | 状态 | 说明 |
|---|---|---|
js/pending_reviews.js |
待审核 | 用户新提交的评分评论（window.PENDING_REVIEWS） |
js/reviews.js |
正式 | 管理员审核通过后的公开评论（window.FOOD_REVIEWS） |
访问 http://localhost:2345/cqumaps/admin（或 http://localhost:2345/admin.html），输入管理密码登录后即可审核：
- 上传：将待审核评论移入正式评论，地图页可见
- 修改：修改昵称 / 评分 / 评论内容后再决定是否上传
- 删除：删除该条待审核评论
管理密码配置在 server.ps1 顶部的 $adminPassword 变量中（请按需修改，勿将密码提交到公开文档）。
| 方法 | 路径 | 说明 |
|---|---|---|
GET |
/api/reviews |
获取全部正式评论；可加 ?placeId=a_food_01 按地点过滤 |
POST |
/api/reviews |
提交评分评论（进入待审核），body 为 JSON |
POST |
/api/admin/login |
管理员登录，body 为 {"password": "..."}，返回 token |
GET |
/api/admin/pending |
获取待审核列表（需登录 token） |
POST |
/api/admin/approve |
上传审核通过，body 为 {"id": "p_1"} |
POST |
/api/admin/update |
修改待审核评论 |
POST |
/api/admin/delete |
删除待审核评论 |
POST /api/reviews 请求示例：
{
"placeId": "a_food_01",
"rating": 4.5,
"comment": "牛肉面很香，推荐！",
"nickname": "小明"
}服务端校验：placeId 必须存在于 data.js、rating 必须在 0 ~ 5 且为 0.5 的整数倍、nickname 必填且最长 30 字、comment 最长 500 字。
提交评分与管理员审核都必须通过
server.ps1启动的本地服务器访问（http://localhost:2345）；直接双击index.html只能查看已有数据，无法写入。
| 用途 | 颜色值 |
|---|---|
| 主色（重大官方深蓝） | #003375 |
| 辅助浅蓝 | #4069B2 |
| 背景底色 | #FFFFFF |
| 侧边栏/面板底色 | #F7F9FC |
| 主文字 | #1A1A1A |
| 次要文字 | #666666 |
| 分割线/边框 | #E2E8F0 |
| 按钮 hover 高亮 | #002559 |
Q1：打开后地图显示「百度地图加载失败」？
A：说明 AK 密钥未配置或无效。请按「第二节」申请密钥并替换 index.html 中的 YOUR_BAIDU_MAP_AK。
Q2：百度地图 AK 配置后仍然加载失败？ A：检查以下几点：
- AK 密钥是否复制完整（32位字符）
- 应用类型是否为「浏览器端」
- Referer 白名单是否包含当前域名（本地开发设为
*） - 是否启用了「JavaScript API」服务
Q3：地图上标记位置和实际建筑有偏差？
A：data.js 中的坐标应使用 GCJ02 坐标系（从高德地图拾取）。请从 高德地图拾取坐标系统 获取坐标后填入，百度地图会自动通过 gcj02ToBd09() 转换显示。
Q4：控制台出现 document.write 警告？
A：这是百度地图 JS API 内部实现使用 document.write 加载子脚本导致的，不影响功能，无需处理。
Q5：直接双击打开 index.html（file:// 协议）能用吗？
A：可以，但部分浏览器对 file:// 协议有安全限制。若百度地图无法加载，建议使用本地服务器（如本项目附带的 server.ps1）打开 http://localhost:2345。
评分、评论与管理审核功能需要后端进程支撑，推荐在 Linux 服务器上用 PowerShell 7 运行 server.ps1，再用 nginx 反向代理。
用户浏览器 → nginx(80/443, HTTPS) → 127.0.0.1:2345 → server.ps1 (pwsh)
完整步骤见 deploy/README.md，仓库已附带：
deploy/cqumaps.service：systemd 服务（自动监听http://+:2345/）deploy/nginx-cqumaps.conf：nginx 反代配置
要点：
server.ps1的监听地址可通过环境变量CQUMAPS_LISTEN覆盖（本地默认http://localhost:2345/，服务器上用http://+:2345/）。- nginx 的
proxy_pass http://127.0.0.1:2345;后面不能加斜杠，否则会去掉/cqumaps前缀导致管理页 404。 - 记得把百度地图 AK 的 Referer 白名单加上你的域名；云服务器安全组只放行 80/443。
- 管理员密码配置在
server.ps1顶部$adminPassword中，部署前请修改，勿写入公开文档。 - 定期备份
js/reviews.js与js/pending_reviews.js（评分数据就存在这两个文件里）。
- 底图引擎：百度地图开放平台
- 坐标拾取：高德地图拾取坐标系统
- 图标：Font Awesome
- 重庆大学官方蓝白主题配色