1、引入高德组件

在index.html中引入高德地图及申请的key

2、组件中使用高德，代码如下：

<template>

  <div id="container" style="width:100%;height:100%;position:fixed;">

  </div>

</template>

<script type="text/javascript">

export default {

  name:"GaoDeVec",

 data(){

  return{

    gmap:null,

   curzoom:8, 

    curcenter:[120.300059511791910, 30.419735074496056], //[112.8928472, 23.1572272] 

  }

 },

methods:{

//加载地图

    loadMap(){

      this.gmap = new AMap.Map('container', {

        zoom: this.curzoom,// 8,//级别

        resizeEnable: true,

        center: this.curcenter,  //[118.7128472, 31.9892272],//中心点坐标

       mapStyle: 'amap://styles/d3737aab853bdd3ad090b3d9230fe0a4',  //地图样式

    })

    //监听地图事件

    this.gmap.on('moveend', this.getMapInfo);

    this.gmap.on('zoomend', this.getMapInfo);

  },

  getMapInfo(){

    var curzoom=this.gmap.getZoom()

    var curcenter=this.gmap.getCenter()

    this.setCurzoom(curzoom)

    this.setCurcenter([curcenter.lng,curcenter.lat])

  },

},

mounted(){    this.loadMap() }

}

<script />

这样高德地图就能正常加载了。。。