直奔主题

1.安装vue插件

npm install vue-amap --save

插件安装完成后

2.引入插件

老规矩在main.js中写入：

import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
  key: 'your amap 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'
});

需要注意的是： 在测试时key不去注册也是会显示的。

3.代码使用

<template>
  <div class="map">
    <div class="amap-wrapper">
            <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
    </div>
  </div>

</template>
<script>
export default {
</script>
<style>
.amap-wrapper {
  width: 80%;
  margin: 0 auto;
  height: 500px;
}</style>

效果图：