Vue2或Vue3项目引用百度地图

浏览器搜索百度地图开放平台控制台，登录百度账号，申请百度地图AK，创建应用即可。

方法一：静态加载百度地图API

第1步：在index.html里引入如下代码：

html 复制代码

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/logo.svg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NB System</title>
    <!-- 引入百度API  -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=密钥AK"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

第二步：在组件里使用百度地图的API了

bash 复制代码

<template>
  <div class="map-container">
    <div id="map" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';

  defineOptions({
    name: 'MapLocation', // 组件名称
  });

  // 补充 TS 类型声明（解决 BMapGL 未定义的报错）
  declare global {
    interface Window {
      BMapGL: any; // 百度地图核心对象
    }
  }

  // 地图实例
  let map: any = null;

  // 初始化地图（可选，仅渲染地图用）
  const initMap = () => {
    // 创建地图实例（中心点默认设为北京）
    map = new window.BMapGL.Map('map');
    map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 12);
    map.enableScrollWheelZoom(true); // 开启滚轮缩放
  };
  
  // 组件挂载时初始化地图
  onMounted(() => {
    // 确保百度地图 API 加载完成
    if (window.BMapGL) {
      initMap();
    } else {
      alert('百度地图 API 加载失败，请检查 AK 是否正确');
    }
  });
</script>

<style scoped>
.map-container {
  padding: 20px;
}
</style>

方法二：动态加载百度地图API

第1步：在你的项目js资源文件夹下新建startBMapFun.js文件，内容如下：

javascript 复制代码

    /**
     * 加载百度地图api
     * @param {String} ak  百度地图的AK，必传
     */
    export default function startBMapFun(ak) {
      return new Promise(function(resolve, reject) {
        if (typeof window.BMap !== 'undefined') {
          resolve(window.BMap)
          return true
        }
        window.onBMapCallback = function() {
          resolve(window.BMap)
        }
        let script = document.createElement('script')
        script.type = 'text/javascript'
        script.src =
          'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
      })
    }

第2步：在组件中引入startBMapFun函数：

javascript 复制代码

    import startBMapFun from '@/<资源文件夹>/startBMapFun.js'

第3步：在mounted中调用 startBMapFun()，就可以在组件中使用百度地图的API了，可以开始开发了：

javascript 复制代码

    //这里运用async/await 进行异步处理，保证BMap加载进来后才执行后面的操作
    async mounted() {
      await startBMapFun('密钥')
      ...
    }