我的地图我做主

完美城市

从古代皇城城门到你的地图信息资源网站

我们的课程主题是完美城市。什么是完美城市？一座好的城市，从城门的设计就能看出门道——古代皇城的每一座城门都有独特的功能：运粮的、运水的、走木材的、收税的…每一扇门都是城市运转的一个齿轮。

我们将先从地图上看一看这些城门的功能性，了解古人如何规划一座城市。然后，用 vibe coding 的方式，亲手建立属于自己的地图信息资源网站——把自己的地图发现、地点信息、城市观察，统统收录其中。

Vibe 在英语里是「感觉、氛围、直觉」的意思。Vibe Coding 就是顺着直觉去编程——你不需要学语法、背命令，只需要把脑子里的想法用大白话讲出来，AI 帮你把代码写出来。说白了，就是凭直觉编程。

三步循环：

1. 📝 写提示词——用大白话告诉 AI 你要做什么
2. 🤖 AI 写代码——AI 根据描述生成网页、数据库等功能
3. 👀 看效果 & 调整——不满意就再发提示词修正

传统编程像自己当厨师，从切菜到炒菜全得自己来；Vibe coding 像当导演——你专注「要什么」，AI 负责「怎么做」。

XAMPP 是一套把 Apache 服务器、PHP、MySQL 数据库打包在一起的本地开发环境。装一次，你的电脑里就有了前面讲的「服务器 + PHP + 数据库」三件套，不用再单独配。打开控制面板点 Start，Apache 和 MySQL 就跑起来；网页文件放进 htdocs 文件夹，浏览器输入 localhost 就能访问。

它专为学习设计，不开机自启、不连外网——练手最省事的服务器套装。

浏览器把网址打包成一句话，发给服务器：「请给我这个页面」。

就像顾客对服务员说：来一份地图。

服务器叫醒一段 PHP 脚本。PHP 跑去数据库问：「我要这些数据」，数据库把存好的记录交给它。

就像服务员去仓库，把食材拿出来。

PHP 把取来的数据填进网页模板，拼成一份完整的 HTML。

就像把食材装盘、摆好——数据和模板拼在一起，就是一份能显示的网页。

拼好的 HTML 送回浏览器。浏览器读懂它，把页面画在屏幕上。

你看到的网页，就这样出现了。

XAMPP 装好后，MySQL 的 root 管理员账号默认没有密码，pma 账号也是空密码。后面项目要连数据库，得先给它们设上同一个密码。

浏览器打开 localhost/phpmyadmin → 点「SQL」标签 → 复制下面三行，全部粘贴到输入框，点「执行」。

前两行分别给 root 和 pma 账号设置密码，第三行 FLUSH PRIVILEGES 让新密码立刻生效。改完后，phpMyAdmin 的配置文件也需要同步更新密码，详见下一步。

除了用 phpMyAdmin 网页操作数据库，你也可以用命令行直接操作——效果完全一样。先认识两个概念：

什么是 CMD 和终端？

CMD 是 Command Mand Prompt（命令提示符）的缩写，是 Windows 系统自带的命令行工具——就是一个黑底白字的窗口，你输入文字命令，电脑执行操作。Mac 系统对应的工具叫终端（Terminal），功能一样。

SQL 是 Structured Query Language（结构化查询语言）的缩写，专门用来跟数据库"对话"的语言。你在 phpMyAdmin 的「SQL」标签里输入的那些命令，就是 SQL 语句。用命令行进入 MySQL 后输入的，也是同样这些 SQL 语句——两种方式，同一种语言，同一个结果。

Windows：打开 CMD

按 Win + R → 输入 cmd → 回车，打开黑色命令行窗口。

第一行：进入 MySQL 所在的目录。第二行：用 root 账号登录，-p 表示需要输入密码，回车后输入你设的密码 Study@YunGu.2026（输入时不显示，正常现象）。

Mac：打开终端

在「启动台」搜索 终端 或 Terminal 打开；也可在「访达 → 应用程序 → 实用工具」里找到。

Mac 上 MySQL 的可执行文件在 XAMPP 的 bin 目录里，直接用完整路径调用即可。回车后同样输入密码。

进入后做什么？

看到 mysql> 提示符就说明进来了。现在你可以直接输入 SQL 语句，比如 SHOW DATABASES; 查看所有数据库——跟在 phpMyAdmin 里点「SQL」标签执行的效果一模一样。

数据库密码改好了，但 phpMyAdmin 还在用旧密码（空密码），所以现在登录会报错。我们需要找到 phpMyAdmin 的配置文件，把密码同步更新。

第一步：找到配置文件

用 VS Code 或记事本打开这个文件，找到下面这一行：

第二步：填入新密码

保存文件后，重新打开 localhost/phpmyadmin，就能正常登录了。用户名填 root，密码就是刚才设的 Study@YunGu.2026。

前面提到的工作目录和配置文件路径都是 Windows 系统的。如果你用的是 Mac（苹果电脑），XAMPP 的安装路径不同，htdocs 文件夹的位置也不一样。

Mac 系统的 htdocs 路径：

Mac 上 phpMyAdmin 配置文件的路径也对应变化：

Mac 系统在 Finder 中按 Cmd + Shift + G，粘贴路径即可快速跳转到对应文件夹。

在 WorkBuddy 里把工作目录指向自己的专属文件夹——每位同学用自己的用户名命名（这里以 user001 为例），写好的网页文件都放在这里。

放进去的文件，浏览器通过下面这个地址就能直接打开：

每人一个用户名，自己的代码、自己的网址，互不干扰——把上面的 user001 换成你的用户名就行。

与 AI 的协作约定：今后你每次提交的提示词（prompt），AI 都会自动以日志形式记录到下面的文件里，并顺手整理格式、美化页面——你的每一步操作都有迹可循，随时能回看自己是怎么一步步把地图做出来的。

每次和 AI 对话后，提示词都会自动追加到这个文件里，按时间排列、格式清晰。

如果你用的是 苹果电脑 Mac 系统，下面的提示词里路径需要改成 Mac 的格式。区别就两处：

Windows vs Mac 路径对照

所以 Mac 用户的提示词改成这样：把网站位置和用户子目录的路径替换为 Mac 格式即可。

其他完全一样，AI 会帮你在 Mac 的 htdocs 根目录写好跳转文件。

环境配齐了，现在正式开始 vibe coding——用一句话把你想要的功能告诉 AI，让 AI 帮你写代码。

这是你的第一个提示词：让浏览器打开 localhost 时，自动跳转到你自己的首页。点「复制」，粘贴到 WorkBuddy 对话框发给 AI。

AI 会在 htdocs 根目录写一个跳转文件——以后只要打开 localhost，就直接进到你的 user001 首页，这就是你的「个人网址入口」。

首页跳转做好了，接下来让 AI 帮你连上数据库，建一个属于自己的数据库——后面所有的地图数据都要存进去。

点「复制」，粘贴到 WorkBuddy 对话框发给 AI。AI 会连接 MySQL、创建数据库，并把每一步操作记到 log.html 里。

AI 会用 root 账号连上 MySQL，执行 CREATE DATABASE mycity001，然后把连接参数、建库语句、执行结果都写进 log.html——你随时能回看整个过程。

数据库建好了，接下来让 AI 帮你创建一个专用数据库用户——后面「我的地图」网站的 PHP 代码就用这个账号连数据库，不用 root 管理员，更安全。

点「复制」，粘贴到 WorkBuddy 对话框发给 AI。AI 会创建一个名为 citizen 的新用户，授予 mycity001 数据库的全部操作权限，并把过程记到 log.html 里。

AI 会执行 CREATE USER 'citizen'@'localhost' 和 GRANT ALL PRIVILEGES ON mycity001.* TO 'citizen'，创建一个专门给「我的地图」项目用的数据库账号——后面写 PHP 连数据库就用它，而不是用 root，这样更安全。

数据库和用户都准备好了，现在开始往你的首页里嵌入一张真正的地图——用百度地图 API。

点「复制」，粘贴到 WorkBuddy 对话框发给 AI。AI 会告诉你百度地图 API 的调用说明页面在哪里，并帮你把地图插入 index.html。

AI 会帮你找到百度地图开放平台的文档入口，告诉你怎么申请 AK（访问密钥），然后把地图代码写进你的 index.html——刷新浏览器就能看到地图了。

AI 会告诉你百度地图开放平台的入口。下面是开发「我的地图」需要用到的五个核心资源：

开发「我的地图」网站，通常的流程是：

1. 在百度地图开放平台注册账号 → 创建应用 → 获取 AK（Access Key）
2. 在网页中引入 <script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"></script>
3. 用 JavaScript 初始化地图实例

百度地图 JavaScript API 有多个版本，开发前先了解它们的区别——选择合适的版本，能让开发更顺利。

我们的「我的地图」项目使用 v3.0 版本——命名空间是 BMap，上一页的资源链接对应的也是这个版本。

使用百度地图 API 之前，必须先申请一个 AK（Access Key，访问密钥）——它是百度用来识别「这个地图请求是谁发的」的通行证。没有它，地图加载不出来。

为什么要设置密钥机制？

• 📌 身份识别——百度需要知道每个地图请求来自谁，就像进图书馆要刷卡
• 📊 用量统计——每个开发者每天有免费调用额度，超了才需要付费
• 🛡️ 防止滥用——没有密钥，有人可以无限刷接口，拖垮所有人的服务
• 🔒 安全控制——密钥绑定白名单域名，只有你授权的网站才能用

三个重要页面：

申请步骤：

1. 打开开发者控制台，用百度账号登录（没有就注册一个）
2. 点击「创建应用」→ 应用类型选「浏览器端」
3. 填写应用名称（如「我的地图」），在白名单框里填 localhost
4. 提交后页面会显示一串 AK 密钥——复制保存好

拿到 AK 后，把它填进 <script src="https://api.map.baidu.com/api?v=3.0&ak=你的AK"> 里，地图就能正常加载了。

百度地图 API 对个人开发者提供免费额度——对我们做课堂项目绰绰有余。以下是常用服务的配额参考：

💡 3 万次/天是什么概念？一个用户打开一次地图页面只算 1 次调用，30,000 次意味着每天可以有上万人访问你的地图。课堂项目完全不用担心超限。

⚠️ 以上数据可能随百度政策调整，最新配额请查看 开发者控制台 → 配额管理。

AK 密钥拿到了，API 文档也读过了——现在把这一切组合起来，让 AI 帮你往首页里嵌入一张真正的百度地图。

点「复制」，粘贴到 WorkBuddy 对话框发给 AI。AI 会按照 JSAPI v3.0 文档的说明，在 index.html 中引入百度地图脚本，初始化一张以北京为中心的地图。

AI 会按照 v3.0 文档的步骤：在 HTML 中引入 <script src="https://api.map.baidu.com/api?v=3.0&ak=...">，创建一个 <div id="map"> 容器，用 new BMap.Map("map") 初始化地图实例，设置北京坐标（39.9, 116.4）为中心点——刷新浏览器，一张可拖拽、可缩放的百度地图就出现在你的首页上了。

地图已经有了——现在给它加上交互功能：左侧省份选择器、建主题文件夹表单、文件夹列表，全部连上数据库。

点「复制」，粘贴到 WorkBuddy 对话框发给 AI。AI 会帮你完成省份下拉框（从 regions 表读取）、文件夹创建表单（写入 folders 表）、文件夹列表展示（查询 folders 表）三个功能。

AI 会帮你完成三件事：①用 PHP 从 regions 表读取省份列表，渲染成 <select> 下拉框放在地图左侧；②建一个表单（文件夹名 + 说明），点「创建文件夹」按钮后用 AJAX 或表单提交写入 folders 表；③查询 folders 表全部记录，在下方列出所有主题文件夹——刷新页面即可看到新增的文件夹。

用 phpMyAdmin 查看数据库里的 regions 表和 folders 表——看看中文显示是否正常、数据表结构是否正确。如果发现中文乱码或结构异常，把问题描述发给 AI，让它帮你排查修正。

常见原因：建库/建表时没有指定 utf8mb4 字符集，或 PHP 连接数据库时没有执行 SET NAMES utf8mb4。AI 会帮你定位是哪一步出了问题，并给出对应的 SQL 修正语句或 PHP 代码修改方案。

上一轮让 AI 加了省份选择器——现在打开浏览器刷新页面，检查一下：省份是否以下拉列表的形式出现在地图的左侧？如果显示成了单选按钮、位置不对、或者根本没有出现，就发这个提示词让 AI 修正。

AI 会检查 HTML 中的 <select> 标签是否正确渲染、CSS 布局是否把选择器放在了地图左侧——如果之前用的是 <input type="radio"> 单选框，AI 会改成 <select> 下拉列表；如果位置不对，AI 会调整 CSS 的 float 或 flex 布局。

文件夹列表已经有了——现在给每个文件夹加上「修改」和「删除」按钮，让它变成一个真正能增删改的管理面板。

AI 会帮你实现：①每条文件夹记录后面加「修改」「删除」两个按钮；②点「删除」时用 AJAX 发请求，从 folders 表删除该条记录并刷新列表；③点「修改」时把该条记录的省份、文件夹名、说明填回上方的表单里，同时把「创建文件夹」按钮隐藏，换成「更新文件夹」和「取消修改」两个按钮——点「更新文件夹」执行 UPDATE，点「取消修改」清空表单恢复原状。

文件夹管理面板做完了——现在给地图加上搜索功能：在文件夹列表下方放一个搜索框，输入关键词后点「搜索地点」，右边的地图自动跳转到搜索结果位置；旁边再放一个「清除搜索」按钮，恢复地图原状。

AI 会帮你实现：①在文件夹列表下方加一个「地图搜索」区域，包含一个文本输入框和两个按钮（搜索地点 / 清除搜索）；②点「搜索地点」时调用百度地图 LocalSearch 或 BMap.LocalSearch 服务，把搜索结果以标注的形式显示在右侧地图上，并自动调整视野范围；③点「清除搜索」时清除地图上所有搜索标注，恢复到初始状态。

地图搜索功能做好了——现在把搜索到的地点「抓」下来保存。在搜索区域下方新增一个「地点抓取」表单：点击搜索结果自动填入经纬度和地址名称，填写备注后点「保存地点」，数据就存进 places 表，和 folders 表通过文件夹名称关联。

AI 会帮你实现：①在搜索区域下方加一个表单，包含经度、纬度两个只读文本框，地址名称文本框，一个 <textarea rows="3"> 备注框，以及「保存地点」按钮；②给搜索结果的标注/列表项绑定点击事件，点击后把该地点的经纬度和名称自动填入表单；③点「保存地点」时用 AJAX 把数据写入 places 表，该表通过 folder_name 字段与 folders 表关联——这样每个地点都挂在某个主题文件夹下。

地点保存功能做好了——现在把已保存的地点也列出来，和文件夹列表一样，每条带「修改」和「删除」按钮，形成完整的地点管理闭环。

AI 会帮你实现：①在地点抓取表单下方，查询 places 表中属于当前文件夹的地点记录，渲染成列表；②每条地点旁边加「修改」「删除」两个按钮——点「删除」时用 AJAX 从 places 表删除该条记录并刷新列表；③点「修改」时把该地点的经度、纬度、地址名称、备注填回上方的地点抓取表单，同时把「保存地点」按钮切换为「更新地点」和「取消修改」两个按钮——和文件夹管理的交互逻辑完全一致。

地点抓取模块已经有了经度、纬度、地点名称和备注——但少了「详细地址」字段。搜索结果返回的地点往往带一段完整地址（如「北京市海淀区中关村大街 1 号」），把这段地址也存下来，以后查看地点信息更完整。

AI 会帮你在 places 表中新增一个 address 字段（ALTER TABLE places ADD COLUMN address VARCHAR(255)），在地点抓取表单里加一个只读的「地址」文本框，点击搜索结果时把地点的详细地址自动填入，保存时一并写入数据库——这样每条地点记录就包含完整的地址信息了。

第九个提示词做了文件夹的修改/删除功能——但测试时发现一个 bug：点「修改」后按钮切换成了「更新文件夹」和「撤销修改」，点「更新文件夹」保存修改后，按钮没有恢复成原来的「创建文件夹」，还停留在「更新文件夹」状态。发提示词让 AI 修复这个问题。

AI 会检查「更新文件夹」按钮的点击回调函数——在 UPDATE 请求成功后，需要：①清空表单各字段；②把「更新文件夹」「撤销修改」按钮隐藏；③重新显示「创建文件夹」按钮；④刷新文件夹列表。bug 的原因通常是 AJAX 成功回调里漏写了按钮状态重置的代码。

文件夹和地点的增删改都做好了——现在让地图「活」起来：点击「主题文件夹列表」中的某个文件夹，地图上就自动标出该文件夹下所有已保存的地点，每个地点显示一个红色气球和红色矩形标签，点击气球还能弹出备注信息。

AI 会帮你实现：①给文件夹列表的每项绑定点击事件，点击后用 AJAX 查询 places 表中 folder_name 等于该文件夹的记录；②遍历结果，用 new BMap.Marker(point) 在每个地点坐标上添加红色气球标注（自定义 BMap.Icon 红色图标）；③用 new BMap.Label() 给每个标注添加红色矩形边框标签，文字为红色粗体；④给标注绑定 click 事件，点击时弹出一个白底矩形信息窗（BMap.InfoWindow 或自定义 DOM），显示该地点的备注内容。

通过这门课，你收获了——

1. 🗺️ 一张属于自己的地图网站——从零搭建，可以分享给所有人
2. 💬 与 AI 对话的能力——学会把想法变成清晰的提示词，让 AI 帮你实现
3. 🔧 动手解决问题的习惯——遇到报错不慌，查一查、试一试、调一调
4. 🧠 一个新视角——编程不再是"写代码"，而是"说清楚你想要什么"

技术会更新，工具会换代，但把想法变成现实的能力——永远属于你。