vue3 + @vuemap/vue-amap

@vuemap/vue-amap是一个Vue.js组件，用于在Vue.js应用程序中轻松使用高德地图API。以下是使用Vue3和@vuemap/vue-amap的简单示例：

1.首先，使用yarn或npm安装@vuemap/vue-amap：

yarn add @vuemap/vue-amap

2.在main.js中导入@vuemap/vue-amap并注册组件：

import { createApp } from 'vue'
import App from './App.vue'
import AMap from '@vuemap/vue-amap'

const app = createApp(App)

app.use(AMap)

app.mount('#app')

3.在组件中使用AMap组件：

<template>
  <div>
    <amap-map :zoom="zoom" :center="center">
      <amap-circle :center="center" :radius="1000" @click="cirClick"></amap-circle>
    </amap-map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 13,
      center: [116.397428, 39.90923]
    }
  },
  methods: {
    cirClick(e) {
      const { lng, lat } = e.lnglat
      this.$message.success(`您当前点击圆的经纬度是${lng},${lat}`)
    }
  }
}
</script>

在上面的示例中，我们首先在main.js中导入@vuemap/vue-amap并将其注册为Vue应用程序的插件。然后，在组件中，我们使用amap-map和amap-circle组件来显示地图和圆。我们还定义了一个cirClick方法来处理圆的点击事件，并使用$message.success方法显示经纬度。