vue3中使用高德地图获取所选地点的经纬度详细步骤

好的，我会尽量详细地说明一下。

1. 首先，在你的 Vue3 项目中安装高德地图的 SDK，可以使用如下命令：

   npm install --save @amap/amap-jsapi-loader@2.0.0-beta.2

2. 在你的 Vue3 项目中创建一个地图组件，可以使用如下代码：

   <template>
     <div id="map-container"></div>
   </template>
   
   <script>
   import { defineComponent } from 'vue';
   import { useAMapLoader } from '@amap/amap-jsapi-loader';
   
   export default defineComponent({
     name: 'Map',
     setup() {
       // 加载高德地图的 SDK
       const { load } = useAMapLoader({
         key: '您申请的高德地图开发者Key',
         version: '2.0',
         plugins: [],
       });
   
       // 在组件加载时初始化地图
       const initMap = async () => {
         await load();
         const map = new window.AMap.Map('map-container', {
           zoom: 10,
           center: [116.397428, 39.90923],
         });
   
         // 点击地图获取经纬度
         map.on('click', (event) => {
           const lnglat = event.lnglat;
           console.log(lnglat.getLng(), lnglat.getLat());
         });
       };
   
       initMap();
   
       return {};
     },
   });
   </script>

3. 将地图组件添加到你的页面中，例如：

   <template>
     <div>
       <Map />
     </div>
   </template>
   
   <script>
   import { defineComponent } from 'vue';
   import Map from './Map.vue';
   
   export default defineComponent({
     name: 'App',
     components: {
       Map,
     },
   });
   </script>

在这个示例中，我们使用 `useAMapLoader` 函数来加载高德地图的 SDK，并在组件加载时初始化了地图。在地图上点击时，我们使用 `map.on('click', ...)` 监听了点击事件，并在回调函数中获取了所选点的经纬度。

需要注意的是，这个示例中的代码是基于 Vue3 和 @vue/cli 4.x 版本开发的，如果你使用的是其他版本的 Vue 或 Vue CLI，可能需要进行相应的调整。同时，你需要将代码中的 `您申请的高德地图开发者Key` 替换为你自己申请的开发者 Key。