分享好友 最新资讯首页 最新资讯分类 切换频道
用 AI + 高德地图 MCP,3 小时做出杭州美食地图
2025-07-12 16:59
图片

阿里妹导读


本文记录了一次从灵光一现到快速落地的 AI + 地图服务实践,通过结合 Cursor 与高德 MCP 地图服务平台,作者仅用几个小时就实现了一个可交互、可筛选、可推荐的杭州美食地图应用。

最近刷到一篇热帖,一位在阿里五年的同学总结了一份她这五年(吃的每一口记录)收集的杭州美食排行榜,为“美食荒漠”正名。也让我回忆起自己初到杭州进入团队时也曾想整理一份“美食地图”,却因种种原因而作罢。逢最近团队准备选团建的餐厅,于是立马把这篇帖子分享给投食官。投食官仔细调研后感慨道,“这篇文章真是太好了,如果能在地图上看到它们的位置就更好了。” 

这让我萌生了为这个美食排行榜做一个杭州美食地图的想法,以便能快速地看到餐厅的位置并进行选择。实现方法上 AI coding 加高德 MCP 有没有搞头?

文末附源码和项目地址供大家参考和取用。

安装高德MCP server

过程参考 :Cursor快速接入高德MCP server

https://lbs.amap.com/api/mcp-server/gettingstarted

只需准备好你的高德 key,在 cursor 上设置里如下配置即可。

配置好后检查 mcpserver 的状态,如下图则是正常可用的。

图片

给 AI 提需求-构建工程提示词

输入“需求文档”后,cursor 会进入 Plan 模式进行规划整体设计方案。

十几分钟写完“需求文档”,晚饭时间到,提给 AI 让它先写着,我们去吃饭~

AI coding-开始寻找杭州美食之旅

调用高德 MCP Server-获取餐厅准确位置和信息

AI 会先调用高德 MCP Server 的 maps_text_search 方法通过模糊查询,查到候选餐厅信息。

图片

输入

输出

可以看到,查出了一系列餐厅,其中有如*餐厅的基本信息,取出 id,作为下一轮的输入。

可以看到紧接着 AI 会调用高德 MCP Server 的能力,通过 id 来获取餐厅详情。

图片

输入

输出

可以看到这里获取到了餐厅的详情信息,包含名称、经纬度、地址、照片、营业时间、评分等。

AI 会将高德 MCP Server 中获取的数据格式化,整理到 json 文件中,作为数据源。

编写页面

数据收集完后,就开始根据需求,编写代码了,通过引入高德 API 展示杭州地图,然后将上一步整理的数据引入进来,标出餐厅的位置。并且支持点击餐厅的名称,弹框展示餐厅的详情,餐厅的推荐理由。

图片

虽然没有关注代码具体怎么实现的,但是它就这样水灵灵的工作起来了~

但我认为我们还是需要理解 AI 写的每一行代码,对代码质量有一个评估,一方面自己能有所进步,一方面不能让 AI 自由发挥的太过,到后面一行也看不懂,改也改不动的时候,项目就崩了。自己不理解的代码,可以让 AI 为代码都加上注释,方便理解。

调试页面

AI 写完了主体页面和功能点后,预览一下,还是有挺多细节需要修改的,如名称大小、背景框样式、弹框点击关闭逻辑等,这些和 AI 沟通,说明需要修改的位置和要求即可,如果说不清的时候,可以直接截图给 AI,告诉它要改什么,理解意图上还是十分强大的。

找素材

但是 AI 有一点不足的是不太方便从外部直接获取资源,比如试图让 AI 自己去网上找合适的素材图标,但是失败了,它会让我去给它下载,不然它会自己画一个丑陋抽象的 SVG 图标。

实在忍不了,只能去网上找素材,可以说整个过程中,花的最多的时间就是这里了。找合适的素材,尝试下载,要收费?换一个地方找,终于是免费的了,下载下来,传到图床上,变成公网可访问的链接。

整个找素材的过程十分痛苦,如果 AI 可以自己找就好了,也许是使用的姿势不太对,还需要继续研究。

好在最终找到了一个非常棒的平台,那就是阿里巴巴图标矢量库,还是自家兄弟好,素材非常的全且好用,大力推荐。

地址:https://www.iconfont.cn/?spm=a313x.search_index.i3.d4d0a486a.2dff3a81XH4Q3q

餐厅分类与筛选

对于之前的收集的餐厅的数据,没有一个很好的分类进行表达,于是让AI 重新分析一下整个餐厅数据,结合餐厅的信息,进行分类,然后将餐厅类型与图标素材再进行一个匹配。得到一个分类好的餐厅列表,与图标的映射关系。

图片

然后就可以愉快的让 AI 结合这个分类数据,改写一下餐厅的图标啦,并且基于分类,再加上了图例列表,和筛选项的功能,方便展示,不然 100个餐厅全部展示在地图上,也不太方便小伙伴们看。

然后页面的效果如下:

图片

AI 推荐餐厅

看了地图上标注的餐厅后,才发现,离自己园区的距离都比较远,于是含泪再写一份自己团队的聚餐选点指南,让 AI 帮助推荐餐厅。

有了前面的基础,这次 20 分钟就搞定了,主要在写需求文档和微调页面样式上,可以分析一下各个餐厅的优劣,离出发点的距离,交通方式,和所需时间,周边配套等。 最后进行一个智能总结,推荐一个餐厅,效果如下:

图片

小伙伴们就可以愉快的进行决策,到底选哪个餐厅了~

新的功能正在和我们投食官持续优化中,比如先选择团建地方,再选择聚餐地方,多个地点让 AI 分析推荐等~

发布与部署

公网部署方法挺多的,比如 GitHub、Gitee上提供了静态页面部署的能力,或者可以租一个阿里云服务器申请域名,搭建自己的网站。

在 GitHub 部署静态页面的简要指南

以下为 GitHub Pages 静态部署的核心步骤,基于官方文档和工具链实现:

此 Action 会将指定目录内容部署到  分支

4. 访问页面

5. 注意事项

最后

这次的实践我认为还是非常的有趣的,整个开发过程大概 3-4 小时,而且主要花在了找素材和调整样式上了。放在以前,有了一个好的点子,但是可能会因为麻烦,跨技术栈,生产周期长、拖延症等各种因素导致“创业未半而中道崩殂”。

不得不感叹,AI 真的能帮助人们提高效率,并且使之前不可能或者很难完成的事情变得可行。在 AI 时代,可能需要从之前传统的“关注技术栈和专业,关注如何实现”的思维转向聚焦到“扩展思维的宽度和认知,寻找事物的可达路径”上。

另外,高德的小伙伴是否考虑一下,增加一个餐厅、团建的地点投票功能~

可以在高德上发起投票,录入几个候选位置,邀请小伙伴们一起投票。可以很方便的查看当前位置(或者出发地点)距离候选地点的距离、交通方式和用时、候选地点周边配套等。 也可以让 AI 结合需求背景,总结一下各候选地点的优势。然后小伙伴们就可以愉快地投票了!

源码如下,需要的小伙伴可自取,在这个基础上改改就能用了。

杭州美食地图

“去哪吃”源码

10分钟微调:让0.6B模型媲美235B模型


大参数模型效果好,但成本高、响应慢。针对该问题,可以用大参数模型的输出去微调小参数模型,使其在特定任务中的表现接近大参数模型,这一过程也被称为模型蒸馏。本方案介绍如何通过模型蒸馏提升 Qwen3-0.6B 模型在特定任务的表现(本案例中准确率从14%提升至90%以上)。

最新文章
番茄“红透”三河口
8月中旬,暑气渐消,闻喜县后宫乡三河口村的田间地头却透着别样的火热。600亩番茄田里,饱满的果实挂满枝头,红的似火、黄的如金
温泽霖 姜琪|学者作家的本色写作——於可训小说创作研讨会侧记
武汉大学文学院主办的“於可训小说创作研讨会”,近日在武汉大学樱顶图书馆召开,来自全国各地百余名文学学者专家与会发言。其中
Q2全球/中国手机市场销量出炉:华为国内登顶,小米保持增长
7月17日消息,近日,知名调研机构Canalys和IDC相继公布了第二季度智能手机市场调研报告,详细披露了当季全球及中国市场的五大手
长城军工股票三个交易日涨幅偏离值超20%
雷达财经 文|杨洋 编|李亦辉6月19日,安徽长城军工股份有限公司(证券代码:601606,证券简称:)发布股票异常交易波动暨风险提
第八届聂耳音乐周将于7月17日启动
7月10日,记者从第八届聂耳音乐周新闻发布会上获悉,本届音乐周将于7月17日至23日同期在昆明和玉溪举行。活动将通过“一体两翼”
金发美女扑倒在地竟是在中国拍短剧:此前是儿童书作家,跨洋当演员爱上中国美食文化和网购
极目新闻记者 王柳钦近日,在社交平台上,一名金发外国模特演员扑倒在地的花絮桥段,因与国内网络短剧剧情出奇雷同,吸引了不少
博尼:加盟国米是儿时梦想成真 齐沃是真正的良师益友
直播吧7月5日讯 官方消息,国米从帕尔马签下21岁的中锋博尼,据此前罗马诺报道,转会费总价2600万欧元。转会费构成为2300万欧基
登陆央视黄金档!我省参与创作出品的电视剧《浴血荣光》今晚开播
纵览客户端讯 由福建省委宣传部、湖北省委宣传部、河北省委宣传部、江西省委宣传部、福建省广播影视集团、河北省广播电视局、河
【法听——国咨律所每日法律资讯】 2025年7月4日星期五
看每日法律资讯,知天下法律大事,欢迎关注国咨法听【高层法治动态】【最高检:发挥最高检咨询委员在提供决策咨询方面的作用】7
不只是卖菜,他用一盘沙拉轻食,开拓从田间到工厂的共赢路
早上7点,当大多数城市还未完全苏醒,位于上海青浦“一号农场”的智能沙拉轻食工厂内,已是一片繁忙景象。自动化产线发出沉稳而
推荐文章