npm i @amap/amap-jsapi-loader --save

<script setup>
import { onMounted, onUnmounted } from "vue";
// onMounted: Vue 生命周期鉤子，當組件掛載后自動執(zhí)行
// onUnmounted: 當組件卸載時自動執(zhí)行，用來做清理。
import AMapLoader from "@amap/amap-jsapi-loader";
// AMapLoader: 用于動態(tài)加載高德地圖 JavaScript API

let map = null;

onMounted(() => {
  // 安全碼配置，密鑰   
  window._AMapSecurityConfig = {
    securityJsCode: "ee0136064796e038160b3",
  };

  AMapLoader.load({
    key: "5d2572a613600fb64", // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
    version: "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多個如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {         //創(chuàng)建一個地圖實例，掛載在 ID 為 "container" 的 DOM 上。
        // 設置地圖容器id
        viewMode: "3D", // 是否為3D地圖模式
        zoom: 8, // 初始化地圖級別
        center: [109.7, 19.2], // 初始化地圖中心點位置(海南)
      });
    })
    .catch((e) => {
      console.log(e);
    });
});


//地圖的清理
onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 98%;
  height: 450px;
  margin-right: 5px;
  margin-left: -5px;
  margin-top: 40px;
}
</style>