vue3 vite引入天地图api

要在Vue3项目中使用Vite引入天地图API，可以按照以下步骤进行：

1. 在项目根目录下安装天地图API的npm包

npm install --save @tencent/txmap-wx-jssdk

2. 在Vue3的main.js文件中导入天地图API的js文件，并初始化

import Vue from 'vue'
import App from './App.vue'
import { Map } from '@tencent/txmap-wx-jssdk';

Vue.config.productionTip = false

const map = new Map({
  key: 'YOUR_APP_KEY', // 替换成你的应用密钥
  version: '2.0.0' // 版本号
});

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在components里面的组件中使用地图组件

<template>
  <div class="map">
    <div id="map-container"></div>
  </div>
</template>

<script>
import { onMounted } from 'vue';
import { Map } from '@tencent/txmap-wx-jssdk';

export default {
  name: 'MapContainer',
  setup() {
    onMounted(() => {
      const map = new Map({
        key: 'YOUR_APP_KEY', // 替换成你的应用密钥
        version: '2.0.0' // 版本号
      });
      map.showIndoorMap();
    });

    return {};
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 100%;
  position: relative;
}

#map-container {
  width: 100%;
  height: 100%;
}
</style>

在组件中使用地图组件需要注意的是，要在组件的setup函数中初始化地图，以及在onMounted钩子函数中使用地图组件。同时，记得要替换掉YOUR_APP_KEY为自己申请的应用密钥。