vue.js导入高德地图

1.第一步  npm 安装 vue-amap  

npm install vue-amap --save

2.在 main.js 中引入  高德地图

import AMapfrom 'vue-amap';

3.在main.js 中加入 

Vue.use(AMap);

// 初始化vue-amap

AMap.initAMapApiLoader({

// 申请的高德key

key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

// 插件集合

plugin: ['AMap.Autocomplete','AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']

});

4.显示地图

<el-amap

vid="amap" :zoom="zoom" :amap-manager="amapManager" :center="center"

ref="map"

class="amap-demo"

>

</el-amap>

5.vue 代码

import VueAMap from "vue-amap";

let amapManager = new VueAMap.AMapManager();

export default{

data () {

return {

zoom: 10,

center: [116.383798,39.908315],

amapManager: amapManager,

}

}