nuxt3环境调用高德地图jsapi

安装依赖@vuemap/vue-amap

npm install --save @vuemap/vue-amap

修改nuxt.config.ts

export default defineNuxtConfig({
  css: ['@vuemap/vue-amap/dist/style.css'],
  vite: {
    optimizeDeps: {
      exclude: ['@vuemap/vue-amap']
    }
  }
})

utils文件夹中新建一个mapLoadUtil.js文件

import {initAMapApiLoader} from "@vuemap/vue-amap";
export function initMapApi(){
  initAMapApiLoader({
    key: 'XXXXX',
  })
}

在vue模版中调用

<template>
  <div class="map-container">
    <ClientOnly>
      <ElAmap></ElAmap>
    </ClientOnly>
  </div>
</template>

<script setup>
import {initMapApi} from "@/utils/mapLoadUtil.js";
import {onBeforeMount} from 'vue';
import {ElAmap} from "@vuemap/vue-amap";

onBeforeMount(() => {
  initMapApi()
})
</script>

<style scoped>
.map-container{
  height: 500px;
}
</style>

参考来源：https://vue-amap.guyixi.cn/zh-cn/introduction/ssr.html