基本地图引用

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "element-ui": "^2.6.1",
     "vue": "^2.6.6",
+    "vue-amap": "^0.5.8",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/App.vue

@@ -5,21 +5,5 @@
 </template>
 
 <style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
+
 </style>

src/main.js

@@ -3,11 +3,19 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import ElementUI from 'element-ui'
+import VueAMap from 'vue-amap'
 import 'element-ui/lib/theme-chalk/index.css'
 
 Vue.use(window.AVUE)
 Vue.use(ElementUI)
+
 Vue.config.productionTip = false
+Vue.use(VueAMap)
+VueAMap.initAMapApiLoader({
+  key: '107ffea1fd3a292eb23d701253de4814',
+  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
+  v: '1.4.13'
+})
 
 new Vue({
   router,

src/views/Home.vue

 <template>
-  <div>
+  <div class="amap-wrapper">
+    <el-amap class="amap-box" :vid="'amap-vue'" :style="{height: clientHeight}"></el-amap>
   </div>
 </template>
 
 <script>
-
 export default {
-  components: {
-
+  data () {
+    return {
+      clientHeight: ''
+    }
+  },
+  mounted () {
+    this.clientHeight = `${document.documentElement.clientHeight - 20}px`
+    window.onresize =  () => {
+      this.clientHeight = `${document.documentElement.clientHeight - 20}px`
+    }
   }
 }
 
 </script>
+<style lang="scss" scoped>
+
+</style>

yarn.lock

@@ -1824,6 +1824,11 @@ camel-case@3.0.x:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
+camelcase@^1.2.1:
+  version "1.2.1"
+  resolved "http://registry.npm.taobao.org/camelcase/download/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+
 camelcase@^4.1.0:
   version "4.1.0"
   resolved "http://registry.npm.taobao.org/camelcase/download/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -7723,6 +7728,13 @@ upper-case@^1.1.1:
   resolved "http://registry.npm.taobao.org/upper-case/download/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
   integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
 
+uppercamelcase@^1.1.0:
+  version "1.1.0"
+  resolved "http://registry.npm.taobao.org/uppercamelcase/download/uppercamelcase-1.1.0.tgz#324d98a6b3afc7e8a8953e10641509b0e4e23f97"
+  integrity sha1-Mk2YprOvx+iolT4QZBUJsOTiP5c=
+  dependencies:
+    camelcase "^1.2.1"
+
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "http://registry.npm.taobao.org/uri-js/download/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
@@ -7841,6 +7853,13 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-amap@^0.5.8:
+  version "0.5.8"
+  resolved "http://registry.npm.taobao.org/vue-amap/download/vue-amap-0.5.8.tgz#8d866e39c037b31c85ff7ddc58fcb5aef03c3b6c"
+  integrity sha1-jYZuOcA3sxyF/33cWPy1rvA8O2w=
+  dependencies:
+    uppercamelcase "^1.1.0"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "http://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"