vue3 +ts实现高德地图的展示

要在 Vue 3 中使用 TypeScript 来展示高德地图，你需要先安装 `@types/amap-js-sdk` 和 `@vue/cli-plugin-typescript` 这两个依赖包。然后按照以下步骤进行：

1. 在 `main.ts` 文件中引入高德地图的 JS API：

import AMapLoader from '@amap/amap-jsapi-loader';

AMapLoader.load({
  key: 'your-amap-api-key',
  version: '2.0',
  plugins: ['AMap.Geolocation', 'AMap.MarkerClusterer'],
}).then(() => {
  // 高德地图 JS API 加载完成
});

2. 创建一个 Vue 组件来展示地图：

<template>
  <div class="map-container" ref="mapContainer" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Map',
  props: {
    center: {
      type: Array,
      required: true,
    },
  },
  setup(props, { emit }) {
    const map = new AMap.Map(props.center, {
      zoom: 10,
    });

    // 地图加载完成后触发事件
    map.on('complete', () => {
      emit('mapLoaded');
    });

    // 将地图实例存储到组件实例中
    const mapContainer = ref(null);
    onMounted(() => {
      mapContainer.value.appendChild(map.getContainer());
    });

    // 在组件销毁时销毁地图实例
    onUnmounted(() => {
      map.destroy();
    });

    return {
      mapContainer,
    };
  },
});
</script>

3. 在需要展示地图的页面中引入 Map 组件并传入中心点坐标：

<template>
  <Map :center="[116.397428, 39.90923]" @mapLoaded="onMapLoaded" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Map from '@/components/Map.vue';

export default defineComponent({
  name: 'MyPage',
  components: {
    Map,
  },
  methods: {
    onMapLoaded() {
      console.log('地图加载完成');
    },
  },
});
</script>

这样就可以在 Vue 3 中使用 TypeScript 展示高德地图了。当然，这只是一个简单的例子，你还可以根据自己的需求来进行更复杂的操作。