https://github.com/kylebing/map

路书，路线规划，高德地图 api 示例，地图信息 vue3 ts vite
https://github.com/kylebing/map

dirvingroute gaode gaode-loca gaode-sdk gaodemap loca map maproute routeplanner routing typescript vue3

Last synced: about 1 month ago
JSON representation

路书，路线规划，高德地图 api 示例，地图信息 vue3 ts vite

• Host: GitHub
• URL: https://github.com/kylebing/map
• Owner: KyleBing
• Created: 2021-06-28T07:45:11.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2025-04-02T09:40:16.000Z (about 1 month ago)
• Last Synced: 2025-04-02T10:35:23.681Z (about 1 month ago)
• Topics: dirvingroute, gaode, gaode-loca, gaode-sdk, gaodemap, loca, map, maproute, routeplanner, routing, typescript, vue3
• Language: Vue
• Homepage: http://kylebing.cn/tools/map
• Size: 1.69 MB
• Stars: 134
• Watchers: 3
• Forks: 26
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 路书

骑行路线规划应用

一个基于 [高德地图API](https://lbs.amap.com/api/javascript-api-v2/documentation) 制作的地图 web 应用，可以分享路线、查看 gpx 路径、地图信息点分享、各市区县布局等。

路线分享  



gpx 路径 展示  



gpx 3D 路径展示  

![2024-05-06 13-52-05 2024-05-06 13_55_08](https://github.com/KyleBing/map/assets/12215982/1bd3033e-84cf-4d56-9b3f-22e6c46c94b8)

数据点展示  



范围标记  



市内区县展示  



---

# 开发

## 一、使用

修改 `/src/mapConfig.js` 中的高德地图开发 key，获取地址： [https://console.amap.com/dev/key/app](https://console.amap.com/dev/key/app)

有两个，别选错了



```js

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://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode)

## 二、后台程序

后台：[https://github.com/KyleBing/portal](https://github.com/KyleBing/portal)

## 三、用到的技术

- `vue3` + `pinia` + `router` 

- `ts`

- 高德 API 2.0

## 四、历程

- 2021-06-28 init `vue2`

- 2024-07-26 `vite` + `ts` + `vue3`