好的，我会尽量详细地说明一下。
1. 首先，在你的 Vue3 项目中安装
高德地图的 SDK，可以使用如下命令：
```bash
npm install --save @amap/amap-jsapi-loader@2.0.0-beta.2
```
2. 在你的 Vue3 项目中创建一个地图组件，可以使用如下代码：
```vue
<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. 将地图组件添加到你的页面中，例如：
```vue
<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。
1811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
