nuxt3框架集成高德地图2.0

<template>
    <client-only>
      <div id="container"  style="width: 100%; height:800px;"></div>
</client-only>
  </template>
  


  <script>
  export default {
    mounted() {
      this.loadMap();
    },
    methods: {
      loadMap() {
        window._AMapSecurityConfig = {
          securityJsCode: "你的securityJsCode------------------------------------------------------------",
        };
  
        const loader = new Promise((resolve, reject) => {
          if (window.AMap) {
            resolve(window.AMap);
          } else {
            const script = document.createElement("script");
            script.src = "https://webapi.amap.com/loader.js";
            script.onload = () => {
              AMapLoader.load({
                key: "你的key------------------------------------------------------------",
                version: "2.0"
              })
                .then((AMap) => {
                  resolve(AMap);
                })
                .catch((e) => {
                  reject(e);
                });
            };
            document.head.appendChild(script);
          }
        });
  
        loader
          .then((AMap) => {
            const map = new AMap.Map("container");
          })
          .catch((e) => {
            console.error(e);
          });
      }
    }
  };
  </script>