在 Vue.JS 中使用百度地铁图 JS API

发布于 2019-05-11  76 次阅读


面向领域的实践这门课要求我们做一个地铁热力图的 Web 项目,我,@NIRVANALAN@0123goodvegetable 负责前端部分。

项目结构

前端我们选用了 Vue.JS,使用 vue-cli 创建前端项目,并加入了 element-ui依赖。以下是我们的项目结构:

.
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js
│
├─public
│      index.html
│      map.html
│
└─src
    │  App.vue
    │  main.js
    │
    ├─assets
    │      logo.png
    │
    ├─components
    │      Card.vue
    │      Chart.vue
    │      Sidebar.vue
    │      SubwayMap.vue
    │      UserHeader.vue
    │
    ├─plugins
    │      element.js
    │
    └─views

百度地铁图 JS API

在注册了百度地铁图 JS API 开发者密钥之后,我们就可以通过 CDN 的方式来引入百度地铁图 JS API。按照官方示例编写 HTML 之后,通过 CDN 引入的 JS API 会有全局的 BMapSub 类型用于创建地铁图。这里我们可以直接 new BMapSub.Subway('container', subwaycity.citycode); 来创建新的地铁图并绑定到 container 容器。

相关内容

newcoderlife/vue-bmap-demo

百度地铁图开发者指南


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。