vue3引入百度地图

在 Vue 3 中引入百度地图，以下核心要点：

1. 核心实现步骤

// 1. 在 public/index.html 引入百度地图 API
<script src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

// 2. 组件中创建地图容器
<template>
  <div id="map" style="width: 100%; height: 500px;"></div>
</template>

// 3. 在 onMounted 中初始化地图
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      const map = new BMap.Map("map");
      const point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
    });
  }
}

2. 关键技术点

• 异步加载优化

  // 动态加载避免阻塞
  const loadMapScript = () => {
    return new Promise((resolve) => {
      const script = document.createElement('script');
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=你的密钥&callback=initMap`;
      window.initMap = resolve;
      document.head.appendChild(script);
    });
  };

• 组件化封装

  // 封装可复用地图组件
  props: ['center', 'zoom'],
  setup(props) {
    onMounted(async () => {
      await loadMapScript();
      const map = new BMap.Map("map");
      map.centerAndZoom(new BMap.Point(...props.center), props.zoom);
    });
  }

• TypeScript 支持

declare global {
  interface Window {
    BMap: any;
  }
}

• 内存管理

  onUnmounted(() => {
    mapInstance?.destroy(); // 防止内存泄漏
  });

3. 替代方案

• 使用第三方库

• npm install vue-baidu-map-3x

  // main.js 全局注册
  import BaiduMap from 'vue-baidu-map-3x';
  app.use(BaiduMap, { ak: '你的密钥' });
  
  // 组件中使用
  <baidu-map :center="{lng: 116.404, lat: 39.915}" :zoom="15">
    <bm-marker :position="{lng: 116.404, lat: 39.915}" />
  </baidu-map>

4. 面试注意事项

1. 安全性

   • 强调 AK 需配置白名单（Referer限制）

   • 生产环境避免将 AK 直接暴露在前端代码

2. 性能优化

   • 按需加载地图组件（如动态import）

   • 使用 v-if 控制地图渲染时机

3. 常见问题

   • 跨域问题：确保 AK 配置了正确的域名白名单

   • TypeScript 报错：通过 declare 声明全局 BMap 类型

   • SSR 兼容：在 onMounted 中初始化（避免服务端执行）

5. 总结回答模板

在 Vue 3 中集成百度地图的核心步骤是：申请 AK → 引入 API → 在 onMounted 中初始化地图实例。关键技术点包括：通过动态脚本加载优化性能、封装可复用组件、使用 TypeScript 增强类型安全、在 onUnmounted 中销毁实例避免内存泄漏。对于快速开发场景，推荐使用 vue-baidu-map-3x 第三方库。需特别注意 AK 安全配置（白名单限制）和 SSR 兼容性问题。