在vue3项目中使用新版高德地图的完整步骤

请参考以下步骤：

步骤一：创建高德地图开发者账户

进入高德地图开发者平台，用你的个人账号登录或注册一个新账号。登录后进入"我的应用"页面，创建一个新的应用来获取 key 值。

步骤二：安装AMapJSAPI

在你的Vue 3项目根目录中安装AMapJSAPI模块依赖：

npm install @amap/amap-jsapi-loader

步骤三：配置AMapJSAPI模块

在你的Vue 3项目中的 main.js文件中，通过引用AmapJSLoader来实现对AMapJSAPI 的配置。例如：

import { createApp } from 'vue'
import App from './App.vue'
import AMapLoader from '@amap/amap-jsapi-loader';

const amapPromise = AMapLoader.load({
  key: '这里填写你从高德地图开发者平台获取的key值',
  version: '2.0',
  plugins: ['AMap.Geolocation', 'AMap.MarkerClusterer'],
  AMapUI: {
    version: '1.1',
    plugins: ['overlay/SimpleInfoWindow'],
  },
});

createApp(App).config.globalProperties.$amapPromise = amapPromise;
createApp(App).mount('#app');

这段代码中我们通过createApp方法为Vue 3应用配置了一个你可以全局访问的 Promise 对象 amapPromise。

步骤四：在Vue 3项目使用AMapJSAPI

到这里我们就可以在你的Vue 3项目中使用AMapJSAPI模块了。通过在组件中引用 AMap 对象，我们可以直接使用地图相关的 API。例如：

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

<script>
export default {
  name: "MyMap",
  mounted: async function () {
    const AMap = await this.$amapPromise;
    const map = new AMap.Map("map", {
      zoom: 11,
      center: [116.397428, 39.90923],
    });
    const marker = new AMap.Marker({
      position: new AMap.LngLat(116.405467, 39.907761),
      title: "北京市"
    });
    marker.setMap(map);
  },
};
</script>

<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

在这个示例中，我们在一个Vue组件内部引用了AMap实例，并创建了一个新的地图，并在地图上标记了一个名为“北京市”的新marker。

示例二：在Vue 3项目中使用高德地图JavaScript API SDK的高级组件

高德地图JavaScript API SDK提供了很多高级组件，方便你快速创建地图、搜索、路线等不同的功能。为了使用它们，首先我们需要在 main.js文件中添加一些配置，例如：

import { createApp } from 'vue'
import App from './App.vue'
import AMapLoader from '@amap/amap-jsapi-loader'

const amapPromise = AMapLoader.load({
  key: '这里填写你从高德地图开发者平台获取的key值',
  version: '2.0',
  plugins: [
    'AMap.Geolocation',
    'AMap.MarkerClusterer', 
    'AMap.ToolBar', 
    'AMap.Scale', 
    'AMap.OverView',
    'AMap.MapType',
    'AMap.PolyEditor',
    'AMap.CircleEditor'
  ],
  AMapUI: {
    version: '1.1',
    plugins: ['overlay/SimpleInfoWindow', 'misc/PositionPicker']
  }
});

createApp(App).config.globalProperties.$amapPromise = amapPromise;
createApp(App).mount('#app');

在上面的代码中，我们添加了一些常见的插件，并且增加了一个版本号，为了使用一些独立的功能。接下来，我们就可以在Vue 3组件中使用高德地图JavaScript API SDK的高级组件了，例如：

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

<script>
export default {
  name: "MyMap",
  mounted: async function () {
    const AMap = await this.$amapPromise;
    const map = new AMap.Map("map", {
      zoom: 11,
      center: [116.397428, 39.90923],
    });
    const positionPicker = new AMapUI.PositionPicker({
      mode: "dragMap",
      map: map
    });
    positionPicker.on("success", function(positionResult) {
      console.log(positionResult);
    });
    positionPicker.on("fail", function(positionResult) {
      console.log(positionResult);
    });
    positionPicker.start();
  },
};
</script>

<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

在这个示例中，我们在Vue 3组件中使用了 AMapUI.PositionPicker，这是一个可拖动的地图位置选择器，并通过事件监听函数来处理它的输出结果。