# 初始化地图

src/lang/en.js

@@ -8,6 +8,7 @@ export default {
     device: 'Device Status',
     detail: 'Device Detail',
     logs: 'Log List',
+    map: 'Map',
     deviceSetting: 'Device Setting',
     systemSetting: 'System Setting',
     guide: 'Guide',

src/lang/zh.js

@@ -8,6 +8,7 @@ export default {
     device: '状态监控',
     detail: '设备详情',
     logs: '日志列表',
+    map: '区域地图',
     deviceSetting: '设备设置',
     systemSetting: '系统设置',
     guide: '引导页',

src/main.js

@@ -18,6 +18,15 @@ import './permission' // permission control
 // import './mock' // simulation data
 
 import * as filters from './filters' // global filters
+import VueAMap from 'vue-amap'
+Vue.use(VueAMap)
+
+VueAMap.initAMapApiLoader({
+  key: '29fc9d79996d548cb00726229752cd1f',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  // 默认高德 sdk 版本为 1.4.4
+  v: '1.4.4'
+})
 
 Vue.use(Element, {
   size: 'medium', // set element-ui default size

src/router/index.js

@@ -64,7 +64,8 @@ export const constantRouterMap = [
       { path: 'index', component: () => import('@/views/counter/index'), name: 'statistic', meta: { title: 'statistic' }},
       { path: 'device', component: () => import('@/views/counter/device'), name: 'device', meta: { title: 'device' }},
       { path: 'detail', component: () => import('@/views/counter/detail'), name: 'detail', meta: { title: 'detail' }},
-      { path: 'logs', component: () => import('@/views/counter/logs'), name: 'logs', meta: { title: 'logs' }}
+      { path: 'logs', component: () => import('@/views/counter/logs'), name: 'logs', meta: { title: 'logs' }},
+      { path: 'map', component: () => import('@/views/counter/map'), name: 'map', meta: { title: 'map' }}
     ]
   }
   // {

src/views/counter/map.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="app-container">
+    <div class="amap-wrapper">
+      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'map'
+}
+</script>
+
+<style lang="scss">
+  .amap-wrapper {
+    width: 500px;
+    height: 500px;
+}
+</style>
+