nuxt 使用高德地图

要在 Nuxt 中使用高德地图，可以按照以下步骤进行操作：

1. 在高德地图开放平台上创建应用并获取 API Key。

2. 安装 `@amap/amap-jsapi-loader` 包，它是高德地图 JavaScript API Loader 的封装。

   npm install @amap/amap-jsapi-loader

3. 在 `nuxt.config.js` 中添加以下配置：

   export default {
     // ...
     head: {
       script: [
         {
           src: 'https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY',
           async: true,
           defer: true,
         },
       ],
     },
     // ...
     plugins: [
       {
         src: '~/plugins/amap.js',
         ssr: false,
       },
     ],
   }

其中 `YOUR_API_KEY` 是你在高德地图开放平台上创建应用时获取的 API Key。

4. 在 `plugins/amap.js` 文件中添加以下代码：

   import AMapLoader from '@amap/amap-jsapi-loader'

   export default async ({ app }) => {
     const loader = new AMapLoader({
       // 高德地图 JavaScript API Loader 的配置项
       // 可以参考官方文档：https://lbs.amap.com/api/javascript-api/guide/abc/load
       key: 'YOUR_API_KEY',
       version: '1.4.15',
     })

     const AMap = await loader.load()

     app.AMap = AMap
   }

其中 `YOUR_API_KEY` 是你在高德地图开放平台上创建应用时获取的 API Key。

5. 在组件中使用 `AMap` 对象来加载地图，例如：

   <template>
     <div ref="mapContainer" style="width: 100%; height: 300px;"></div>
   </template>

   <script>
   export default {
     mounted() {
       const map = new this.$AMap.Map(this.$refs.mapContainer, {
         zoom: 10,
         center: [116.397428, 39.90923],
       })
     },
   }
   </script>

上面的例子创建了一个地图，并将其显示在一个高度为 300px 的容器中。你可以根据自己的需求来修改代码。

希望这些步骤能帮助你在 Nuxt 中使用高德地图。