nuxt 使用高德地图JSAPI key

如果您想在 Nuxt.js 中使用高德地图 JS API，可以按照以下步骤操作：

1. 在高德开放平台注册账号并创建应用，获取到您的 API Key。

2. 在 Nuxt.js 项目中安装 `@nuxtjs/dotenv` 插件，用于加载环境变量。您可以使用以下命令进行安装：

npm install --save-dev @nuxtjs/dotenv

3. 在项目的根目录下创建一个名为 `.env` 的文件，并添加以下内容：

AMAP_API_KEY=您的高德地图 API Key

4. 在 `nuxt.config.js` 文件中配置 `dotenv` 模块，将 `.env` 文件中的环境变量加载到应用程序中：

export default {
  // ...
  modules: [
    '@nuxtjs/dotenv'
  ],
  // ...
}

5. 在需要使用高德地图 JS API 的组件中，使用以下方式调用 API：

mounted() {
  const script = document.createElement('script')
  script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${process.env.AMAP_API_KEY}`
  script.async = true
  script.onload = () => {
    // 高德地图 API 加载完成后的回调函数
  }
  document.head.appendChild(script)
}

在上面的代码中，我们使用了 `process.env.AMAP_API_KEY` 来获取环境变量中的 API Key，并将其传递给高德地图 API 的请求 URL 中。当高德地图 API 加载完成后，会执行 `onload` 回调函数。

希望这可以帮助到您！