一、安装依赖
npm install @amap/amap-jsapi-loader二、
<template><div class="maincenter"><div id="container"></div></div>
</template><script setup>import AMapLoader from "@amap/amap-jsapi-loader";
const mmap = () => {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15}).then((AMap) => {const map = new AMap.Map("container", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 15, // 初始化地图级别// mapStyle: "amap://styles/0824ae733ca7d0699ff2d79d166a15b3", //设置地图的显示样式resizeEnable: true, //是否监控地图容器尺寸变化dragEnable: true, //初始状态下可移动center: [120.396005, 36.3210788], //初始化地图中心点青岛农大});}).catch((e) => {console.log(e);})}mmap()
</script>
<style lang="scss" scoped>
.maincenter {width: 100%;position: relative;
}#container {width: 100%;margin: 0 auto;height: 100vh;
}i {font-style: normal;
}
</style>如图：
