用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爱钻牛角尖,一条路你不告诉它是错的它要一直走下去,浪费你的时间。同时一些不确定的信息,它能给你编的像模像样,需要自己有一双火眼金睛~

相关推荐
我爱一条柴ya3 小时前
【AI大模型】LLM模型架构深度解析:BERT vs. GPT vs. T5
人工智能·python·ai·ai编程
GitLqr10 小时前
AI洞察 | 一周动态: Manus 裁员、Kimi K2 开源、混元 3D 创作、Qwen Chat 桌面客户端
人工智能·agent·ai编程
草梅友仁11 小时前
手机号注册登录功能开发 | 2025 年第 28 周草梅周报
开源·github·ai编程
r0ad11 小时前
Anthropic Cookbook:开发者可以参考的Claude AI高效开发指南
ai编程·claude
运器12315 小时前
【一起来学AI大模型】PyTorch DataLoader 实战指南
大数据·人工智能·pytorch·python·深度学习·ai·ai编程
Francek Chen20 小时前
【飞算JavaAI】一站式智能开发,驱动Java开发全流程革新
人工智能·ai编程·java开发·飞算javaai·炫技赛
coderleft20 小时前
如何在windows中使用claude code? 手把手详细教程来了,附100刀白嫖额度!
ai编程·cursor
欧雷殿20 小时前
超越 Vibe Coding 的智能研发
低代码·aigc·ai编程
LeeAt21 小时前
手把手教你构建自己的MCP服务器并把它连接到你的Cursor
javascript·cursor·mcp
qiyue772 天前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor