骑行路线规划应用

一个基于 高德地图API 制作的地图 web 应用,可以分享路线、查看 gpx 路径、地图信息点分享、各市区县布局等。

注意
高德地图api只用作开发测试用,并不能用于实际使用,如果持续使用,高德官方会打电话给你,督促你购买商业使用授权,每年5w,不缴纳就会过段时间给你把服务停了。
所以在未获取到授权之前,不要用在商业项目上,不然挺麻烦的。 如果你想找一个免费的地图使用,可以看一下 OpenStreetMap OSM
是一个可以免费使用的地图,地图信息主要靠所有网友自行添加维护。 它的用法也非常简单,我准备下一步的地图应用在这个基础上做,可以看一下例子: https://github.com/KyleBing/map-OSM 在使用它的时候,需要遵循一定的使用要求。

路线分享
Screenshot 2024年01月23日 at 17 45 28

gpx 路径 展示
GPX

gpx 3D 路径展示
2024年05月06日 13-52-05 2024年05月06日 13_55_08

数据点展示
Screenshot 2024年01月23日 at 17 39 57

范围标记
Screenshot 2024年01月23日 at 17 40 29

市内区县展示
Screenshot 2024年01月23日 at 17 40 42

注意
高德地图api只用作开发测试用,并不能用于实际使用,如果持续使用,高德官方会打电话给你,督促你购买商业使用授权,每年5w

修改 /src/mapConfig.js 中的高德地图开发 key,获取地址: https://console.amap.com/dev/key/app

有两个,别选错了

const key_web_js = '' // web js key
const key_service = '' // web服务 key
export {
 key_web_js,
 key_service
}

Web JS 在使用的时候还需要在服务器中设置对应的安全密钥,具体参见官方文档:

JS API 安全密钥使用 https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

后台:https://github.com/KyleBing/portal

• vue3 + pinia + router
• ts
• 高德 API 2.0

• 2021年06月28日 init vue2
• 2024年07月26日 vite + ts + vue3

• 点过多时,列表滚动 2025年04月18日