vue3 + vite 引入百度地图api

在Vue 3和Vite项目中引入百度地图API，你需要遵循以下步骤：

1. 在index.html中通过script标签引入百度地图的SDK。
2. 在Vue组件中创建地图实例。

首先，在index.html中添加百度地图SDK的引用（确保替换YOUR_AK为你的百度地图API Key）：

<!-- index.html -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>

然后，在Vue组件中创建地图：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
 
const map = ref(null);
 
onMounted(() => {
  map.value = new BMap.Map("map"); // 创建Map实例
  const point = new BMap.Point(116.404, 39.915); // 创建点坐标
  map.value.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
});
</script>
 
<style>
/* 你的样式 */
</style>

确保你的Vite配置允许外部脚本的引入。如果你使用的是Vite 2+，默认情况下应该是允许的。如果你使用的是Vite 1.x或更早，可能需要在vite.config.js中配置externals。

以上代码实现了在Vue 3和Vite项目中引入百度地图API的基本步骤。记得替换YOUR_AK为你的实际API Key。