当前位置：首页 > news >正文

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

news 来源：原创 2025/6/21 20:20:33

用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，然后用合并后的数据注册到地图上

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