前言
Cursor系列已经分享了几篇了，分别是：
- 前端《Cursor：前端不会消失，但前端的你会消失 - 掘金》，这个比较早，但是思路和方法还是没什么变化；
- 全栈《Cursor实战：一人全流程模块开发 - 掘金》，单后端没法看效果不直观，只能搞个全栈的了；
- 小程序《Cursor实战回顾：花慧小程序开发 - 掘金》；
- 还包括一篇开源游戏的改动《撬动"屎山"，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协同编程"，大家加油~
大家如果有什么疑问、经验，或者有什么场景尝试没有成功的，欢迎留言交流哈~