Vue 引入高德地图 vue-amap，封装高德地图组件

 一、在高德开发平台，获取Key

高德开发者平台—链接地址

二、引入vue-amap

1.安装

npm install -S vue-amap

2、在 main.js 里引入

其中更多的插件，请参考： 插件的使用-入门-教程-地图 JS API | 高德地图API (amap.com)

import Vue from 'vue'
import VueAMap from 'vue-amap';

// 地图
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '你的Key',
  plugin: [
    'AMap.DistrictSearch',
    'AMap.Scale', 
    'AMap.OverView', 
    'AMap.ToolBar', 
    'AMap.Polygon', 
    'AMap.MapType', 
    'AMap.PolyEditor',
    'AMap.Autocomplete',
    'AMap.PlaceSearch', 
    'AMap.Geolocation',                     
    'AMap.Geocoder',
    'AMap.MouseTool',
    'AMap.DistrictLayer',
    'Map3D',
    'AMap.ControlBar'],
  v: '1.4.14',
  uiVersion: '1.0',
});


// 全局注册地图组件
import baseMap from '@/components/map/base-map';
Vue.component('base-map', baseMap);

Vue.config.productionTip = false
new Vue({
  el: '#app',
  render: (h) => h(App),
})

3、完整组件代码（src/components/map/base-map.vue）

4、使用组件