中文
English 你相信吗？只需一句话，就能让AI帮你创建一个交互式世界地图网站，展示各国星巴克拿铁的价格，无需编写代码、查找资料或掌握任何技术细节。今天，我将带你体验如何使用Google的Gemini 2.5 Pro模型，从一个简单构想出发，逐步构建一个展示各国拿铁价格的交互式地图网站，同时展示AI在编码、调试和数据验证方面的强大能力。
开始使用Google AI Studio
首先，我进入Google AI Studio，这是一个方便与Google AI模型交互的平台。我选择了“聊天”功能，并选用了最新的Gemini 2.5 Pro Preview模型（标示为“0605”，表示2025年6月5日发布）。为了让AI获取最新信息，我启用了“Grounding with Google Search”功能，使Gemini能够实时搜索网络数据。
设计精确的提示词
成功的关键在于提供清晰、详细的提示词。我要求Gemini创建一个单一的HTML文件，展示一个交互式世界地图，显示各国星巴克中杯拿铁的价格。地图需使用颜色深浅区分价格范围，鼠标悬停时以繁体中文显示国家名称和价格，并包含价格区间的图例。我还指定HTML文件需自包含，无需外部文件。完整提示词已保存，可在下方资源链接中查看。
生成初始代码
点击“运行”后，Gemini开始处理请求，并显示其思考过程，如“确定拿铁数据”“定义价格参数”等。很快，它生成了一个完整的HTML文件，包含CSS样式和JavaScript交互代码。代码中还附带中文注释，解释每段代码的功能，并提供设计概述、使用说明和数据来源。我下载了文件并在浏览器中打开。
测试初版地图
地图成功加载，但悬停在大多数国家时显示“无资料”，只有台湾显示“台湾：135元”。这表明存在数据匹配问题。我回到AI Studio，向Gemini反馈：“只有台湾显示价格，其他地区无数据，请修正。”
AI自动调试
Gemini分析问题后发现，地图的国家名称为英文，而价格数据使用中文名称，导致匹配失败。为解决此问题，Gemini生成了新的HTML文件，加入一个国家名称对照表，将英文地图数据与中文价格数据成功关联。这展示了AI的强大调试能力。我下载更新后的文件并再次测试。
体验改进后的地图
新版地图非常成功！各国根据价格区间显示不同颜色，鼠标悬停时国家高亮为较浅颜色，并以繁体中文显示国家名称和价格。地图下方还有价格区间图例。以下是一些示例：
- 北美：加拿大（115元）、美国（106元）
- 南美：巴西（64元）
- 欧洲：英国（128元）、法国（158元）、丹麦（163元）
- 亚洲及中东：中国（140元）、沙乌地阿拉伯（155元）、泰国（115元）、台湾（135元）、日本（125元）
- 俄罗斯：130元
所有国家价格均正确显示，地图功能完善且视觉效果出色。
优化用户体验
尽管地图已功能齐全，我注意到鼠标悬停效果对注意力不集中的用户可能不够明显。我要求Gemini调整地图，增加鼠标悬停时国家边框加粗为黑色的效果，鼠标离开后恢复正常，其他功能保持不变。Gemini迅速更新代码，新版地图的国家边框更清晰，用户体验显著提升。
验证数据准确性
为确保数据可靠性，我使用了另一个AI搜索工具Perplexity。注意到冰岛显示为灰色（无数据），我询问Perplexity：“冰岛有星巴克吗？”它明确回答：截至2025年，冰岛没有星巴克门店。这解释了地图上冰岛无数据的原因，也初步验证了Gemini的准确性。
为进一步验证，我回到AI Studio，要求Gemini列出所有国家价格表格。我将表格复制到Perplexity，并指示：“验证以下各国星巴克中杯拿铁价格的准确性。”Perplexity分析数据、换算汇率，并生成对比表格，指出澳洲价格略低、奥地利略高、英国明显低估等问题。它总结道：大多数国家价格与国际数据相符，误差在10%以内，属合理范围，并提供了可进一步验证的来源链接。
保存与复用工作流程
结束前，我使用AI Studio的“保存提示词”功能，保存了与Gemini的对话记录，包括提示词和代码，方便未来参考。最终HTML文件及其他资源链接见下方。
超越拿铁价格：无限可能
这个项目展示了交互式地图的广泛应用。你可以用它可视化全球房价中位数、平均工资、物价指数、人口变化或商业数据。掌握这一AI驱动的流程后，你能快速创建任何主题的视觉化地图。
总结
通过Google的Gemini 2.5 Pro，我在几分钟内打造了一个功能完整的交互式世界拿铁价格地图网站，无需编写一行代码。Gemini处理了编码、调试，而Perplexity确保了数据准确性。这一流程让任何人都能轻松创建引人入胜的数据可视化内容，适用于国际价格比较或报告制作。
如果你有其他应用创意，欢迎在评论区分享。完整HTML代码及资源链接如下。期待更多AI实用教程，展示现实世界的应用！
资源：
- [提示词及HTML代码]
- [Perplexity数据验证报告]
- [最终HTML文件下载链接]
开始你的地图之旅吧！
