vue项目引入高德地图

第一步：先全局安装vue-amap

npm install vue-amap --save（如果有淘宝镜像可以cnpm install vue-amap --save）

第二步：全局引入vue-amap在main.js中

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({

  key: '自己申请的key值',

//插件

  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'

});

如图：

第三步：App.vue中粘贴如下代码（给地图一个盒子）：

<template>

  <div id="app">

    <h3 class="title">{{ msg }}</h3>

    <div class="amap-wrapper">

      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>

    </div>

  </div>

</template>

<script>

export default {

  data () {

    return {

      msg: 'vue-amap欢迎您！'

    }

  }

}

</script>

<style>

.amap-wrapper {

  width: 500px;

  height: 500px;

}

</style>

如图：