本文已经授权【稀土掘金技术社区】官方公众号独家原创发布。 ### 事情起源由于最近部门的办公地点要搬迁了，我租的房子离新场地有足足25公里，而且我对象最近也换了部门，我们以前租的房子在通勤上已经满足不了需求了。好在11月底我们的房子就到期了，所以租房子就被提上日程。(**感慨，买房子有鸡毛用啊。**) 我对象的办公地点和我新的办公点的距离开车是15公里，地铁是18公里，所以木的办法，只能在中间地带找个房子了。于是乎，我打开的了地图软件，打算把沿途的小区都一个一个记录下来，然后去计算通勤的性价比。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/73e589c79faf4153a11b615cbde43169~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZOI5bqT5ouJ6ams5aGU5aGU:q75.awebp?rk3s=f64ab15b&x-expires=1763047310&x-signature=NRi0gV5lq%2BOyGb8xrkp43Lg2mEs%3D) 在地图软件上找小区倒是挺简单的，十几分钟我就记了几十个小区，然后我就做了个Excel表格，打算把各个小区到我和我对象办公点的通勤时间、距离都记录下，考虑到多种出勤方式，要统计包括了公交地铁、驾车、骑行。于是乎，我傻傻的打开地图软件，一个一个导航，记录。当我进行到第十几个小区的时候，我吐了。于是乎我想到了AI，于是乎我就去问AI，然后AI这么回答了我 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b15a4b1bbae7440e987659ece0334e10~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZOI5bqT5ouJ6ams5aGU5aGU:q75.awebp?rk3s=f64ab15b&x-expires=1763047310&x-signature=RXTaduTl1othAqM6f8HU8l7pJIk%3D) 可以可以，AI回答的一点毛病没有，有理有据令人信服。由于我实在不想像SB一样去一个一个查了，于是乎我打开了高德的官网，希望能够得到一点启发。你别说，你还真别说，我还真就发现了一个解决方案。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/90cd661df05248dfb5b7600fd79c929e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZOI5bqT5ouJ6ams5aGU5aGU:q75.awebp?rk3s=f64ab15b&x-expires=1763047310&x-signature=G8Ay77aj8hJD61GMo2D%2BELt2WLw%3D) 这不就妥妥的能把问题解决了嘛，于是乎我新建了一个html文件，开始了coding。 ### 我的需求 * 我需要能够输入多个地址、然后选择两个目标地点，用表格展示出距离、时间等信息 * 我需要能够生成Excel文件，方便我记录 * 我需要能够生成图表，能够更直观的看到结果 ### 开发思路 * 调用高德API，规划出A地点到B和C的路径，然后整合返回数据，插入表格 * 利用xlsx，生成Excel * 用eCharts画一个柱状折线图 ### 开发中遇到的问题 * 首先就高德Key每天的调用次数限制，不支持我频繁的搜，按理说一天应该5000次啊，但是调了一百多次就会提醒我超了，但是过会又好了 * 由于我是sdk加载的高德依赖，所以三种出行方式的插件会用冲突，所以我只能加载一个插件就改名存以下，再加载另一个 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5beafc3c12f945dfada311c903bcdd25~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZOI5bqT5ouJ6ams5aGU5aGU:q75.awebp?rk3s=f64ab15b&x-expires=1763047310&x-signature=LTDXDj9EPCzCUXo%2Fv7SQijMvXmc%3D) * 由于高德API是异步调用，不支持同步，多并发调用多次会出现有的请求失效，于是乎我想到了用Generator去控制每次请求结束再调用下一次。 ### 成果演示 ![企业微信截图\_17285486793009.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c0f25a980d494255925b04b3565a16e9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZOI5bqT5ouJ6ams5aGU5aGU:q75.awebp?rk3s=f64ab15b&x-expires=1763047310&x-signature=KgUieraqdTKAQnY08ezFxPKv72g%3D) ![企业微信截图\_17285506996476.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/08fe3f2f2cc143838d3524ba90939902~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZOI5bqT5ouJ6ams5aGU5aGU:q75.awebp?rk3s=f64ab15b&x-expires=1763047310&x-signature=VxWBJJBwajMifd3IU9rKsCEnROI%3D) ### 成果展示这里是代码片段，可以执行下试试水，用的是我的key啊(给个赞呗)，有可能会调用次数超了 [jcode](https://code.juejin.cn/pen/7424424140389482506) ### 遗留生成Excel那个我没写完，因为现在已经满足我的需求了。如果你希望用的话，稍微改下我的代码就好了 ### 源码拷贝就能用哈你只需要去申请一个高德官网完成开发者认证然后去申请自己的应用，把key和token加上就可以了 [传送门](https://lbs.amap.com/api/javascript-api-v2/prerequisites) ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fe8f5afe363b405ea131ea8dc9b349de~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ZOI5bqT5ouJ6ams5aGU5aGU:q75.awebp?rk3s=f64ab15b&x-expires=1763047310&x-signature=9goXJGuDvqhCUJiSF8JuS27o2Lk%3D) ```html

小区名称	{{formData.target1}}最短距离	{{formData.target1}}最快用时	{{formData.target2}}最短距离	{{formData.target2}}最快用时
{{item.name}}	{{item.distance1}}	{{item.time1}}	{{item.distance2}}	{{item.time2}}

查询

生成Excel

```