KyleBing / map

路书,路线规划,高德地图 api 示例,地图信息

Home Page:http://kylebing.cn/tools/map

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

路书

骑行路线规划应用

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

路线分享
Screenshot 2024-01-23 at 17 45 28

gpx 展示
GPX

数据点展示
Screenshot 2024-01-23 at 17 39 57

范围标记
Screenshot 2024-01-23 at 17 40 29

市内区县展示
Screenshot 2024-01-23 at 17 40 42

一、使用

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

有两个,别选错了

开发api key 版本
export default {
    key_web_js: '', // web js key
    key_service: '',  // web服务 key
}

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

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

二、后台

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

三、用到的技术

  • vue2
  • vue router
  • vuex
  • 高德 API 2.0

About

路书,路线规划,高德地图 api 示例,地图信息

http://kylebing.cn/tools/map


Languages

Language:Vue 57.6%Language:JavaScript 39.9%Language:SCSS 2.1%Language:HTML 0.2%Language:CSS 0.2%Language:Shell 0.0%