Cursor实战:1小时集成天地图

前言

Cursor系列已经分享了几篇了,分别是:

前面几篇主要展示了Cursor在各个方向上应用的可能性,后续计划给大家分享更多实际项目开发的场景,希望能更加直观地展示AI协同编程的思路和方法。

今天先从一个地图需求开始吧。

背景及任务

背景

还是我们团队内部的协同平台,整个项目基于SpringBoot+Element UI实现,技术框架是在各种开源组件上面进行了进一步封装,数据库采用的MySQL。

任务

我们的项目在全国很多省市都有案例,为了方便我们自己快速了解项目分布,也为了给领导和客户汇报时直观展示,我们计划增加一个小功能:通过地图展示项目分布。

由于现在百度地图、高德地图都开始收费,我们最终选择了"天地图"。

操作过程

准备工作

项目模块已经开发完成。

所需的菜单也已经添加,包括对应的vue页面。

此处提醒一下,Cursor可以扫描文件结构并新建文件,但是这么简单的操作,个人感觉没有必要。

项目模块增加坐标字段

已有的项目信息模块中增加一个地理坐标字段,直接存储经纬度数据,比如:117.070218,36.666316(后来更正为经度、维度了)。

上下文

项目信息实体类ProjectBase.java。

提示词

复制代码
ProjectBase增加一个字符串类型的字段,存储地理坐标信息,并同步更加Java代码、mapper.xml及页面代码。

结果

没有AI之前,只是增加了一个字段,就得一个文件一个文件查找、修改,还生怕遗漏了哪个。

现在,一次搞定。

引入天地图

上下文

新建好的项目地图页面。

提示词

复制代码
当前页面集成地图组件,地图采用天地图,地图撑满显示区域。
顶部增加搜索栏,搜索条件:项目名称。
根据项目的地理坐标在地图上渲染标记,点击标记在屏幕右侧弹出element抽屉。
抽屉内显示项目信息。

结果

需要注意,由于前面我手动建立了菜单和页面,所以Cursor生成的路由需要手动进行拒绝。

最关键的是Cursor还指导你去申请天地图API Key。

效果

此时因为天地图key未设置,地图未能正常加载。

获取天地图Key

天地图开发资源地址:lbs.tianditu.gov.cn/home.html

注册、登录后,在控制台中新增应用。

将获取的key按照Cursor提醒更新到代码中,此时地图就正常显示了。

耶,看到天安门啦。

测试及优化

在"引入天地图"那一步审阅代码时,就已经发现,动态化的代码已经生成,直接调用的接口。

那就直接录入个测试数据试试,搜索下北京的地理坐标,同步维护到测试数据中。

这里我遇到了一个坑,网上搜索的坐标是纬度在前,但地图中,坐标都是经度在前。。。

更改后,地图和标记都显示正常了。

测试点击标记效果,发现项目信息显示不太美观,看代码发现是应用了我们没升级的Element UI的新样式了,让Cursor修复下就好了。

搞定,收工!

总结

以上就是通过Cursor集成天地图的全过程,说实话,我自己实现的时候,都被惊呆了。全程只有"引入天地图"那一步是关键,其它都是辅助的。

标题的1个小时其实还是保守了,我有10几分钟都是花费在经纬度的问题上了。

日常安利"AI协同编程",大家加油~

大家如果有什么疑问、经验,或者有什么场景尝试没有成功的,欢迎留言交流哈~

相关推荐
学术小八3 分钟前
2025年人工智能、虚拟现实与交互设计国际学术会议
人工智能·交互·vr
仗剑_走天涯1 小时前
基于pytorch.nn模块实现线性模型
人工智能·pytorch·python·深度学习
cnbestec2 小时前
协作机器人UR7e与UR12e:轻量化设计与高负载能力助力“小而美”智造升级
人工智能·机器人·协作机器人·ur协作机器人·ur7e·ur12e
zskj_zhyl2 小时前
毫米波雷达守护银发安全:七彩喜跌倒检测仪重构居家养老防线
人工智能·安全·重构
gaosushexiangji3 小时前
利用sCMOS科学相机测量激光散射强度
大数据·人工智能·数码相机·计算机视觉
ai小鬼头4 小时前
AIStarter新版重磅来袭!永久订阅限时福利抢先看
人工智能·开源·github
说私域5 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
飞哥数智坊5 小时前
新版定价不够用,Cursor如何退回旧版定价
人工智能·cursor
12点一刻6 小时前
搭建自动化工作流:探寻解放双手的有效方案(2)
运维·人工智能·自动化·deepseek
未来之窗软件服务6 小时前
东方仙盟AI数据中间件使用教程:开启数据交互与自动化应用新时代——仙盟创梦IDE
运维·人工智能·自动化·仙盟创梦ide·东方仙盟·阿雪技术观