nuxt 高德地图如何使用key 和密钥

在 Nuxt.js 中使用高德地图时，需要获取高德地图 Web API 的 Key 和密钥。可以按照以下步骤进行操作：

1. 在高德开放平台注册账号并创建应用：https://lbs.amap.com/dev/key/app

2. 在应用管理中找到已创建的应用，点击“管理”按钮，在“应用详情”中可以看到“应用的Key”，将其复制。

3. 在 Nuxt.js 项目中安装 `@nuxtjs/axios` 和 `@amap/amap-jsapi-loader` 依赖：

npm install @nuxtjs/axios @amap/amap-jsapi-loader --save

4. 在 `nuxt.config.js` 中配置 `@nuxtjs/axios` 和 `@amap/amap-jsapi-loader`：

// nuxt.config.js

export default {
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: '/'
  },

  plugins: [
    { src: '~/plugins/amap', ssr: false }
  ]
}

// plugins/amap.js

import Vue from 'vue'
import AmapVue from '@amap/amap-vue'
import AmapLoader from '@amap/amap-jsapi-loader'

Vue.use(AmapVue)

AmapLoader.load({
  key: 'YOUR_AMAP_KEY',
  version: '2.0',
  plugins: [],
  AMapUI: {
    version: '1.1',
    plugins: []
  },
  Loca: {
    version: '1.3.2'
  }
}).then((AMap) => {
  console.log('AMap loaded:', AMap)
})

5. 在页面中使用 AmapVue 组件：

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

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

注意：在 `plugins/amap.js` 中，需要将 `YOUR_AMAP_KEY` 替换为你申请的高德地图 Web API 的 Key。另外，在 `plugins/amap.js` 中也可以配置密钥（secret），但是一般情况下并不需要配置密钥。