中文
English 你是否曾想过，无需编写任何代码，甚至不用查找任何资料，只需一句话，AI 就能帮你创建一个互动式的世界地图网站？这个网站不仅能显示全球各国的星巴克拿铁价格，还能实现颜色区分、鼠标悬停显示国家信息等功能。这听起来可能难以置信，但借助 Google 最新的 Gemini 2.5 Pro 模型，这已成为现实。
告别繁琐代码，AI 一键生成交互式地图
本篇文章将详细演示如何利用 Gemini 2.5 Pro，从一个简单的构想出发，逐步构建一个能显示各国拿铁价格的互动式地图网站。你将亲眼见证 AI 不仅能帮你编写代码，还能进行错误修正、数据匹配，甚至验证数据的准确性，所有操作只需一键完成。
如果你经常需要处理各种数据，比如进行国际商品价格比较，或者想让你的报告更具吸引力、更具互动性，那么这篇文章将为你提供极大的帮助。
零基础入门：用 Gemini 2.5 Pro 快速构建世界地图
我们将从零开始，在短短几分钟内，利用 Google AI Studio 的 Gemini 2.5 Pro，打造一个互动式世界地图，以呈现各国星巴克的拿铁价格。
第一步：进入 Google AI Studio
首先，打开你熟悉的 Google AI Studio 界面，选择“Chat 聊天”功能。在右上角，务必选择最新的 Gemini 2.5 Pro Preview 模型（0605 代表它于 6 月 5 日发布）。为了让 AI 获取最新资讯，记得启用下方的 “Grounding with Google Search” 功能，这将允许 AI 随时搜索网络数据。
第二步：输入关键提示词 (Prompt)
接下来是至关重要的一步：输入详细的指令，也就是提示词（英文叫做 prompt）。我们要求 Gemini “建立一个单一的 HTML 档案，显示一张互动式世界地图，用来展示各国的星巴克中杯拿铁价格。用颜色深浅区分拿铁价格、鼠标所到之处会显示国名与金额。全部都要用繁体中文呈现。” （提示词将在文章末尾提供）。
HTML 就像网页的骨架，它只负责决定网页中要放置什么内容。我们无需理解 HTML，只需让 Gemini 为我们生成即可。
第三步：运行并观察 AI 的思考过程
接着，点击“Run”执行，让 Gemini 开始工作。你会看到 Gemini 正在“思考”，并显示其思考过程，例如“确定拿铁数据”、“定义价格参数”等等。这让我们能够清楚地看到 AI 是如何一步一步拆解问题的。
很快地，Gemini 生成了完整的 HTML 程式码，其中包含了 CSS 样式和 JavaScript。即使你和我一样看不懂这些代码，也不必担心。它甚至在代码中加入了中文注解，解释了各段代码的功能。最后，Gemini AI 还附带了使用说明、设计概述以及数据来源，方便我们正确执行并学习这段代码。
智能除错与数据匹配：AI 的强大纠错能力
修正数据缺失问题
直接点击下方的“Download”按钮，将这段代码下载到电脑。打开下载的 HTML 文件后，地图成功显示。然而，当你移动鼠标时，会发现大部分国家都显示“无资料”，只有台湾显示“台湾：135元”。
我们回到 AI Studio，将这个问题告诉 Gemini：“只有台湾有价格显示，其它地区都没有数据，请修正。” Gemini 再次开始思考，这次其思考过程更加深入。它进行了“数据调查”、“除错配对”、“分析配对逻辑”，最终发现问题出在地图数据中的国家名称是英文，而价格数据中的国家名称是中文，导致两者无法成功匹配。
创建国家名称对照表
为了解决这个问题，Gemini 在新的代码中建立了一个国家名称的对照表，将英文的地图数据名称与我们的价格数据成功连接起来。这让我们亲眼见证了 AI 的除错能力。所以，即使你不会写代码，也无需担心。
我们再次下载修正后的 HTML 代码，然后打开这个修正后的版本。太棒了！地图现在已经根据价格区间显示了不同的颜色。地图上方显示了标题，鼠标所到之处，国家的颜色会变浅，并显示国家名称与价格。地图下方还提供了颜色与价格区间的对照图例，非常完整。
优化用户体验：让地图更清晰易读
让我们来看看不同国家的拿铁价格：北美的价格大致落在中间略低一点，加拿大是 115 元，美国 106 元。接着来到南美洲，巴西只需 64 元。欧洲的价格普遍较高，英国是 128 元，法国 158 元，丹麦 163 元。俄罗斯的价格则落在中间，130 元。再看看亚洲与中东地区：中国 140 元、沙特阿拉伯 155 元、泰国 115 元、台湾 135 元、日本 125 元。看起来所有国家的价格都成功显示了。
增强视觉辨识度
但是，还有一个小问题：当鼠标移动时，被选中的国家虽然会通过颜色变化来强调，但对于注意力不集中的人来说，有时会看不清楚。所以，我们再次请 Gemini 调整一下辨识度。
我们告诉它：“请帮我调整这个互动地图的效果。当鼠标移到某个国家时，除了原本的颜色变化之外，请让那个国家的边界变得更明显，例如加上黑色粗边框。这样观众会更容易注意到目前滑到哪里。鼠标离开后，边框可以恢复正常。除此之外，所有呈现方式都维持不变。”
按下执行。很快地，Gemini 又改好了代码。下载并执行看看，你会发现每个国家的边界是不是清晰多了？而且我们仅仅是输入了几句话就完成了修改，是不是令人惊讶地简单？
拓展应用：互动地图的无限可能
完整的 HTML 代码文件链接将在文章末尾提供，你可以下载并尝试。你一定想到了，这个互动地图的应用并不局限于拿铁咖啡的价格。你也可以用来呈现全球各国的房价中位数、平均工资、物价指数、人口变化，甚至你的商业数据，都可以套用这样的格式来呈现！也就是说，一次学会这个流程，未来你可以快速做出任何主题的世界地图。
数据验证：提升 AI 协作的信任度
地图做好了，但这些数据准确吗？我们用另一个 AI 搜索工具 Perplexity 来进行数据验证。
验证数据来源的准确性
首先，我们在地图上看到冰岛是灰色的，没有数据。这代表 AI 找不到价格。我们来问问 Perplexity：“冰岛有星巴克吗？” Perplexity 的答案很明确：截至 2025 年，冰岛没有星巴克门店。这就解释了为什么地图上没有冰岛的数据，也验证了 Gemini 提供的地图可能具有一定的准确度。
为了进一步验证所有国家的价格，我们回到 AI Studio，给它一个新指令：“请把地图上所有国家的价格条列出来，让我验证。” Gemini 立即生成了一个整齐的表格，列出了国家中文名称、国家代码和新台币价格。
我们将这个表格复制起来，再回到 Perplexity，将其粘贴，并在前面加上指令：“请验证底下各国星巴克中杯拿铁价格的正确性。” Perplexity 开始进行搜索与分析。它不仅帮我们查询数据、换算汇率，还贴心地整理出清楚的比对表格，例如指出澳洲价格略低、奥地利略高、英国明显低估等等问题。
交叉验证：AI 协作的信心保障
最后，它给出了一个明确的总结：“大多数国家的价格与国际资料相符或误差在 10% 以内，属于合理范围”，并指出了部分国家的价格有偏高或偏低的情况。而且，它还列出了查询资料的来源，让我们可以进一步验证这些数据。我们点击来源号码 1，它会打开来源网页，我们就可以亲自验证这些星巴克拿铁的各国价格。
我们都知道，AI 有时会有“幻觉”，胡说八道。但这样的交叉验证是否让你对 AI 协作多了一份信心？如果你对 Perplexity 的详细验证内容感兴趣，链接将在文章末尾提供。
总结：AI 赋能的未来工作流
最后，我们回到 AI Studio，记得点击右上方的“Save prompt”按钮，将刚才与 Gemini 2.5 Pro 的对话过程（包含代码）储存起来，方便未来回顾与参考。
今天，我们从一个简单的想法出发，利用 Gemini 2.5 Pro 快速生成、除错，打造出一个功能完整的互动式世界拿铁价格地图网站，最后再通过 Perplexity 进行数据验证。这完整展示了如何利用 AI 工具进行快速开发与验证。更重要的是，我们不需要自己动手编写一行代码，即使你和我一样看不懂 HTML 代码的内容，也能正确完成并使用它。
从今天的现场操作过程中，你可以看到 Gemini 2.5 Pro 不只会“生成”，只要我们把问题反馈给它，它还会“理解”与“修正”。正如你刚才所看到的，我们发现地图空白、数据缺失，Gemini 都能够根据我们的指令进行分析与改善。这样的流程，让我们这种不会写代码的普通人，也可以独立完成数据的分析与可视化，不仅省下你大把时间，还完成了没有 AI 之前几乎做不到的、吸引人的精彩简报。
这次展示的是互动式地图网站的应用，这个流程还能做成教学网站、分析报告，甚至是你自己的工具。你是否想到了更精彩的应用呢？记得在评论区告诉我！
