nuxt 使用高德地图

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

1. 在高德开放平台注册账号，并创建一个应用，获取到 API Key。
2. 安装 `vue-amap` 包。可以使用以下命令进行安装：

npm install vue-amap

3. 在 Nuxt 的 `plugins` 目录下创建一个 `amap.js` 文件，用于配置高德地图。以下是一个示例配置：

import Vue from 'vue'
import VueAMap from 'vue-amap'

Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
  key: 'YOUR_API_KEY',
  plugin: [
    'AMap.Geolocation',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.ToolBar',
    'AMap.MapType',
    'AMap.Autocomplete',
    'AMap.PlaceSearch',
    'AMap.PolyEditor',
    'AMap.CircleEditor'
  ],
  uiVersion: '1.0.11'
})

4. 在 Nuxt 的 `nuxt.config.js` 文件中，引入 `amap.js` 文件，并将其添加到 `plugins` 中。例如：

export default {
  // ...
  plugins: [
    { src: '~/plugins/amap.js', ssr: false }
  ]
}

5. 在需要使用高德地图的组件中，使用 `amap` 组件。例如：

<template>
  <div>
    <amap :zoom="13" :center="center">
      <amap-marker :position="center" />
    </amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [116.397428, 39.90923]
    }
  }
}
</script>

以上就是在 Nuxt 中使用高德地图的基本步骤。需要注意的是，在使用 `vue-amap` 时，需要将 `ssr` 设置为 `false`，以避免在服务器端渲染时出错。