vue3安装高德地图插件

安装高德地图插件在 Vue3 中可以通过以下步骤实现：

1. 安装 `vue3-amap` 库：

npm install vue3-amap --save

2. 在 `main.js` 文件中引入 `vue3-amap` 库并注册：

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

const app = createApp(App)

// 声明使用插件
app.use(AMap)

// 配置插件
AMap.initAMapApiLoader({
  key: 'YOUR_API_KEY', // 你的高德地图 Key
  plugin: [], // 需要使用的插件列表
  // 更多配置项...
}).then(() => {
  // 地图插件加载完成后，启动应用
  app.mount('#app')
})

3. 在组件中使用 `amap-map` 组件来显示地图：

<template>
  <div>
    <amap-map
      :center="center"
      :zoom="zoom"
      style="width: 100%; height: 500px"
    ></amap-map>
  </div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      center: [116.397428, 39.90923], // 地图中心点经纬度
      zoom: 13, // 地图缩放级别
    }
  },
}
</script>

注意：在上述代码中，你需要替换 `YOUR_API_KEY` 为你自己的高德地图 Key。同时，你也可以根据需要自定义地图的中心点和缩放级别。更多配置项可以参考 `vue3-amap` 文档。