移动端或者pc端引入地图实例 vue-amap.js

# 在src中新建一个utils文件夹 将 maps.js 引入到文件中

## 通过 npm install vue-amap.js --save

### 在全局main.js中引入地图方法

import maps from "./utils/maps";
Vue.prototype.$maps = maps;
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: 'YOUR_KEY',//高德地图key值可在高德地图api官方文档申请
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
  uiVersion: '1.0.11', // 版本号
  v: "1.4.4"

});
new Vue({
  router,VueAMap,
  el: "#app",
  render: h => h(App)
}); 

#### 在template模板中也就是当前页面中

  <div class="maps" id="map">
      <el-amap
        ref="map"
        vid="amapDemo"
        :amap-manager="amapManager"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo"
      ></el-amap>
      <div class="toolbar">
        <button @click="callBack()"></button>
      </div>
    </div>

###### 在当前页面中引入包

import VueAMap from "vue-amap";
let amapManager = new VueAMap.AMapManager();

######## 在data中定义

amapManager,
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: o => {
          console.log(o.getCenter());
          console.log(this.$refs.map.$$getInstance());
          o.getCity(result => {
            console.log(result);
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: e => {
          alert("map clicked");
        }
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
              console.log(o);
            }
          }
        }
      ]

完成