1、NPM 安装 Loader
npm i @amap/amap-jsapi-loader --save
2、创建地图容器
<template>
<div id="container"></div>
</template>
3、设置地图容器样式(自行设置)
4、引入JS API Loader
import AMapLoader from '@amap/amap-jsapi-loader';
5、初始化地图、在 setup() 函数中声明 map 对象
import { shallowRef } from '@vue/reactivity'
setup(){
const map = shallowRef(null);
return{
map,
}
},
6、创建地图
methods:{
initMap(){
AMapLoader.load({
key:"", // 申请好的Web端开发者Key,首次调用 load 时必填
version:"2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins:[''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap)=>{
this.map = new AMap.Map("container",{ //设置地图容器id
viewMode:"3D", //是否为3D地图模式
zoom:5, //初始化地图级别
center:[105.602725,37.076636], //初始化地图中心点位置
});
}).catch(e=>{
console.log(e);
})
},
},