写一个vue3展示高德地图

首先，你需要在你的 Vue3 项目中安装 `vue-amap` 包:

npm install vue-amap -S

然后，在你需要展示高德地图的组件中，引入 `vue-amap` 并初始化高德地图：

<template>
  <div id="map-container">
    <amap :zoom="zoom" :center="center">
      <amap-marker :position="center"></amap-marker>
    </amap>
  </div>
</template>

<script>
import AMap from 'vue-amap';

export default {
  name: 'Map',
  data() {
    return {
      zoom: 10,
      center: [116.397428, 39.90923] // 北京市中心
    };
  },
  mounted() {
    AMap.initAMapApiLoader({
      key: '你的高德地图API Key',
      plugin: [
        'AMap.Geolocation',
        'AMap.Autocomplete',
        'AMap.PlaceSearch',
        'AMap.Scale',
        'AMap.OverView',
        'AMap.ToolBar',
        'AMap.MapType',
        'AMap.PolyEditor',
        'AMap.CircleEditor'
      ],
      // 默认高德 sdk 版本为 1.4.15
      v: '1.4.15'
    });
  },
  components: {
    AMap
  }
};
</script>

<style>
#map-container {
  height: 500px;
}
</style>

在上面的代码中，我们引入了 `vue-amap` 并在 `mounted` 钩子中初始化了高德地图 API。在模板中，我们使用了 `amap` 和 `amap-marker` 组件来展示地图和标记，其中 `:zoom` 和 `:center` 分别用于设置地图的缩放级别和中心点坐标。

你需要将 `key` 参数替换成你申请的高德地图 API Key。