首先到 首页 | 高德控制台 (amap.com)注册添加应用,获取使用权限,得要高德秘钥key 获取成功后如图

第一步安装loader:
npm i @amap/amap-jsapi-loader --save
第二步:在项目中引入
import AMapLoader from '@amap/amap-jsapi-loader'
import { shallowRef } from '@vue/reactivity' // 引入shallowRef
import { onMounted } from 'vue'
第三步在setup中定义
const map = shallowRef(null)
第四步初始化:
let methods = {
initMap() {
AMapLoader.load({
key: '你的key', // 申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [''] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then(AMap => {
this.map = new AMap.Map('你的容器id', {
//设置地图容器id
viewMode: '3D', //是否为3D地图模式
zoom: 5, //初始化地图级别
center: [105.602725, 37.076636] //初始化地图中心点位置
})
})
.catch(e => {
console.log(e)
})
}
}
onMounted(() => {
methods.initMap()
})
如此你就得到了第一高德地图的实例demo

更多交互详情请参考官方文档:JSAPI结合Vue使用-JSAPI与前端框架结合-教程-地图 JS API v2.0|高德地图API (amap.com)