在 Vue.JS 中使用高德地铁图 JS API

发布于 2019-05-08  95 次阅读


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

项目结构

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

    Directory: C:\Users\newco\Develop\vue-amap-demo
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----          2019/5/7    19:12                node_modules
d-----          2019/5/7    19:41                public
d-----          2019/5/7    17:20                src
-a----          2019/5/7    17:20            214 .gitignore
-a----          2019/5/8    14:21              0 a.txt
-a----          2019/5/7    17:20             53 babel.config.js
-a----          2019/5/7    18:44           1060 package.json
-a----          2019/5/7    19:36         443106 package-lock.json
-a----          2019/5/7    19:44            286 README.md
    Directory: C:\Users\newco\Develop\vue-amap-demo\public
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----          2019/5/7    17:52            543 index.html
-a----          2019/5/7    18:10            637 map.html
    Directory: C:\Users\newco\Develop\vue-amap-demo\src
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----          2019/5/6    10:02                assets
d-----          2019/5/7    19:36                components
d-----          2019/5/7    18:44                plugins
-a----          2019/5/7    19:08           3549 App.vue
-a----          2019/5/7    18:11            331 element-variables.scss
-a----          2019/5/7    18:45            206 main.js
    Directory: C:\Users\newco\Develop\vue-amap-demo\src\components
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----          2019/5/7    19:36           2769 Chart.vue
    Directory: C:\Users\newco\Develop\vue-amap-demo\src\plugins
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----          2019/5/7    18:45             72 echarts.js
-a----          2019/5/7    17:20            108 element.js

高德地铁图 JS API

在注册了高德地铁图 JS API 开发者密钥之后,我们就可以通过 CDN 的方式来引入高德地铁图 JS API。按照官方示例编写 HTML 之后,通过 CDN 引入的 JS API 会创建 window.subway(container, opt) 函数用于创建地铁图。高德地铁图 JS API 并不像他家的地图 API 一样,会有 AMap 类提供使用,这里直接绑定在 window 上了。

相关内容

newcoderlife/vue-amap-demo

高德地铁图开发者指南


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