nuxt 使用高德地图 显示位置

要在 Nuxt 中使用高德地图显示位置，可以使用 vue-amap 库。首先，您需要在您的项目中安装 vue-amap：

npm install vue-amap --save

然后，在您的页面或组件中，导入并注册 vue-amap：

import VueAMap from 'vue-amap'

export default {
  mounted() {
    // 初始化vue-amap
    VueAMap.initAMapApiLoader({
      // 高德的key
      key: 'your amap key',
      // 插件集合
      plugin: ['AMap.Geolocation']
    })
  },
  methods: {
    // 获取当前位置
    getLocation() {
      this.$amap.getGeolocation({
        // 定位成功后的回调函数
        success: res => {
          console.log(res)
        },
        // 定位失败后的回调函数
        error: err => {
          console.log(err)
        }
      })
    }
  }
}

在上面的代码中，我们首先导入了 vue-amap，并在 `mounted` 钩子中使用 `VueAMap.initAMapApiLoader` 初始化了 vue-amap，并配置了高德的 key 和需要使用的插件（这里只使用了定位插件）。

接着，在 `methods` 中，我们定义了一个 `getLocation` 方法，用于获取当前位置。在这个方法中，我们使用 `$amap` 对象提供的 `getGeolocation` 方法执行定位操作，定位成功后会执行 `success` 回调函数，失败后会执行 `error` 回调函数。

最后，您可以在模板中使用 vue-amap 提供的组件来显示地图和标记点：

<template>
  <div>
    <el-amap :zoom="15" :center="center">
      <el-amap-marker :position="markerPosition"></el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      center: [116.397428, 39.90923], // 地图中心点坐标
      markerPosition: [116.397428, 39.90923] // 标记点坐标
    }
  }
}
</script>

在上面的代码中，我们使用了 `el-amap` 和 `el-amap-marker` 组件来显示地图和标记点。通过 `:center` 和 `:position` 属性来设置地图中心点和标记点的坐标。