vue3高德地图点击获取经纬度

在 Vue3 中使用高德地图 API 获取地图上点击位置的经纬度，你可以通过以下步骤：

1. 首先，在项目中引入高德地图 JavaScript SDK 和 Vue 的绑定功能。通常在 `main.js` 或其他入口文件里：

import { createApp } from 'vue';
import App from './App.vue';
import AMap from '@amap/api-v3';

AMap.init('your_map_id', {
  key: 'your_amap_key', // 你的高德地图API Key
});

2. 然后，在组件中创建地图实例，并设置事件监听器处理点击事件：

<template>
  <div id="map">
    <a-amap :center="center" :zoom="zoom">
      <!-- ... 其他地图配置 -->
    </a-amap>
    <button @click="getCoord">点击获取坐标</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AMap from '@amap/api-v3';

const center = ref([116.404, 39.915]); // 初始地图中心点经纬度
const zoom = ref(13); // 初始缩放级别

function getCoord() {
  const map = AMap.Map('map'); // 获取地图实例
  if (!map) return; // 如果地图还未初始化，不做操作
  
  map.addEventListener('click', (e) => {
    console.log('点击坐标:', e.lnglat);
    // 这里可以将 e.lnglat 赋值给组件状态或者其他变量
  });
}
</script>

在这个例子中，当用户点击地图时，`getCoord`函数会被调用，它会打印出点击的位置经纬度。记得替换 `'your_map_id'` 和 `'your_amap_key'` 为实际的 ID 和 API Key。