nuxt 高德地图JS API

你可以在 Nuxt.js 中使用高德地图 JS API。首先，你需要在你的 `nuxt.config.js` 中设置一个全局变量来存储高德地图 JS API 的密钥：

module.exports = {
  env: {
    amapApiKey: 'your_amap_api_key'
  }
}

然后，在你的页面或组件中，你可以使用 `asyncData` 方法来异步加载高德地图 JS API，并初始化地图：

<template>
  <div id="map"></div>
</template>

<script>
export default {
  async asyncData({ env }) {
    const amapScript = document.createElement('script')
    amapScript.src = `https://webapi.amap.com/maps?v=1.4.15&key=${env.amapApiKey}`
    document.body.appendChild(amapScript)

    await new Promise((resolve) => {
      amapScript.onload = resolve
    })

    return {}
  },
  mounted() {
    const map = new AMap.Map('map', {
      zoom: 10,
      center: [116.397428, 39.90923]
    })
  }
}
</script>

在上面的例子中，我们首先创建了一个 `script` 元素，通过设置 `src` 属性来异步加载高德地图 JS API，并将其添加到页面的 `body` 元素中。然后，我们使用一个 `Promise` 对象来等待高德地图 JS API 加载完成。在 `mounted` 钩子函数中，我们创建了一个地图实例，并将其渲染到页面中的 `map` 元素上。

注意，由于高德地图 JS API 是异步加载的，因此你需要使用 `asyncData` 方法来等待加载完成。另外，你需要在 `mounted` 钩子函数中才能操作实际的 DOM 元素，因为在 `created` 和 `mounted` 之前，DOM 元素还没有被渲染出来。