一、在高德开发平台，获取Key
高德开发者平台—链接地址
二、引入vue-amap
1.安装
npm install -S vue-amap
2、在 main.js 里引入
其中更多的插件，请参考：插件的使用-入门-教程-地图 JS API | 高德地图API ()
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';ponent('base-map', baseMap);Vue.config.productionTip = falsenew Vue({el: '#app',render: (h) => h(App),})
3、完整组件代码（src/components/map/base-map.vue）
<template><div id="base-map"><el-amap:vid="vid"lass="amap-box":zooms="zooms":zoom="zoom":center="center"expandZoomRange=true:mapStyle="mapStyle":events="events":plugin="plugin"ref="map"></el-amap></div></template><script>export default {name: 'base-map',props: {center: {type: Array,default: () => {return [117.412643, 35.016758];}},plugin: {type: Array,default: () => {return [{pName: 'MapType',defaultType: 0,showRoad: false}];}},zoom: {type: Number,default: 11},vid: {type: String,default: 'baseAmap'}},data() {return {// plugin: [{// pName: 'MapType',// defaultType: 0,// showRoad: false// }],zooms: [7, 19],dialogVisible: false,map: {}, //保存地图对象basePolygons: [],baseMarkerLabels: [],// mapStyle: 'amap://styles/f860535f967c0effcc298397ddc1fd10',// mapStyle: 'amap://styles/blue',mapStyle: '',events: {init: () => {this.map = this.$refs.map.$$getInstance();this.map.setMinZoomLevel = 10;this.map.setMaxZoomLevel = 12;this.map.on('complete', () => {this.$emit("init");// this.drawPolygon();});}},};},methods: {}};</script><style lang="scss">.theme-default {overflow: hidden;}.amap-sug-result {z-index: 10240 !important;}.avue-layout {height: 100%;}.avue-main {height: calc(100% - 64px);}#base-map {width: 100%;height: 100%;z-index: 119;}.taiwan {border: solid 1px red;color: red;float: left;width: 50px;background-color: rgba(255, 0, 0, 0.1)}.amap-logo{display: none;//去掉高德地图logoopacity: 0 !important;}.amap-copyright {opacity:0;//去掉高德的版本号}</style>
4、使用组件
<template><div class="map-box"><base-map ref="baseMap" @init="initMap"></base-map></div></template><script>export default {name: "",data() {return {map: {},}},mounted() {},methods: {initMap() {this.map = this.$refs.baseMap.map;}}}</script><style lang="scss">.map-box {width: 100%;height: 500px;}</style>
