1.安装 vue-amap 插件。你可以通过在终端中运行以下命令来安装：

npm install vue-amap --save

2.在main.js文件中引入 vue-amap 并初始化高德地图：

import Vue from 'vue';
import VueAMap from 'vue-amap';Vue.use(VueAMap);
VueAMap.initAMapApiLoader({key: '你的高德地图API Key',plugin: ['AMap.Geolocation','AMap.Autocomplete','AMap.PlaceSearch'],// 高德 SDK 版本，默认为 1.4.15v: '1.4.15'
});

3.在Vue组件中使用高德地图。例如，在一个名为Map.vue的组件中，可以添加如下代码：

<template><div><el-amap :zoom="10":center="centerPoint"class="map-container"ref="amap"><el-amap-marker :position="markerPosition" @click="handleMarkerClick"></el-amap-marker></el-amap></div>
</template><script>
export default {data() {return {centerPoint: [116.397428, 39.90923],markerPosition: [116.397428, 39.90923]};},methods: {handleMarkerClick(e) {console.log('Marker clicked', e);}}
};
</script><style scoped>
.map-container {width: 100%;height: 400px;
}
</style>

在需要显示地图的页面中引入并使用Map组件：

<template><div><h1>高德地图示例</h1><Map /></div>
</template><script>
import Map from '@/components/Map.vue';export default {name: 'MapPage',components: {Map}
};
</script>