用cursor三个小时复刻高德地图的足迹地图

用cursor三个小时复刻了高德地图的足迹地图,当然,是"低配"版的。

1、首先要初始化,提出一个需求,让它自由发挥

运行之后发现它报错了,原因出在这行代码,"https://cdn.jsdelivr.net/npm/echarts@5,4.3/map/js/china.js",在5.0以后,echarts移除了map的内置支持。它先后经历了,换个错误的cdn地址、使用静态json数据、用百度的地图数据等过程,最后还是不行。

在反复提醒之后,他开始玩赖了,在网络上随便搜了一下每个省的中心位置,给我在地图上画了34个小框框敷衍我,这里我忘了截图了,是真的很敷衍!

后面我只好告诉他正确的地址,最后终于给出了结果,它给出的结果是这样的。

好像是一个很好的开端,但是还不够,高德的足迹地图是细分到市级的,这里只到省级。它引入的数据是"china.json",只有省级的数据,而市级的数据在"china-cities.json"。于是我让它把两个都引入进来。这个时候骚操作开始了,他给我画了两个图层,省在上面,市在下面,只要我一缩放或者拖拽,两个图层就不同步了。

没办法,我只好告诉他,应该要先合并两个json,然后用合并后的数据注册到地图上

javascript 复制代码
// 合并数据
const mergedJson = {
    ...provinceJson,
    features: [...provinceJson.features, ...cityJson.features]
};
// 解码合并后的数据
const decodedJson = decode(mergedJson);
// 注册合并后的地图数据
echarts.registerMap('china', decodedJson);

经过一番调教,最后才得到了初版能看的"中国轨迹地图",可以自定义显示自己曾经在这片大地上留下的痕迹。

500多行代码,调教了大概30多次,能写出这个效果也还算很不错了。我发现cursor爱钻牛角尖,一条路你不告诉它是错的它要一直走下去,浪费你的时间。同时一些不确定的信息,它能给你编的像模像样,需要自己有一双火眼金睛~

相关推荐
玄同7659 小时前
Trae国际版与国内版深度测评:AI原生IDE的双生花
ide·人工智能·ai编程·cursor·ai-native·trae
乱世刀疤9 小时前
Claude Code实战:生成植物大战僵尸游戏
ai编程
nbsaas-boot10 小时前
如何进行 Vibe Coding:从“灵感驱动”到“可交付工程”的方法论
java·ai编程
LinkZ-Dev12 小时前
521-解决谷歌 Antigravity 软件登录相关问题
ai编程·gemini·antigravity
玉梅小洋1 天前
Claude Code 从入门到精通(七):Sub Agent 与 Skill 终极PK
人工智能·ai·大模型·ai编程·claude·ai工具
-嘟囔着拯救世界-1 天前
【保姆级教程】Win11 下从零部署 Claude Code:本地环境配置 + VSCode 可视化界面全流程指南
人工智能·vscode·ai·编辑器·html5·ai编程·claude code
小小管写大大码1 天前
如何让vscode变得更智能?vscode接入claude实现自动编程
运维·ide·vscode·自动化·编辑器·ai编程·腾讯云ai代码助手
Anarkh_Lee1 天前
【小白也能实现智能问数智能体】使用开源的universal-db-mcp在coze中实现问数 AskDB智能体
数据库·人工智能·ai·开源·ai编程
森之鸟1 天前
2026年AI编程工具全景图:GitHub Copilot vs Cursor vs Codeium,我如何选择?
github·copilot·ai编程
冬奇Lab1 天前
深入理解 Claude Code:架构、上下文与工具系统
人工智能·ai编程