本文共 1549 字，大约阅读时间需要 5 分钟。

百度地图异步加载实现方案

在使用百度地图API时，经常会遇到一个问题：JS文件加载不完全，导致调用百度API时出现undefined错误。为了解决这个问题，我们可以通过异步加载的方式来实现地图API的初始化。这将确保地图脚本完全加载后再调用API，从而避免运行时错误。

以下是实现方案的详细代码和注意事项：

一、创建 map.js 文件

export function loadBMap(ak) {
    return new Promise((resolve, reject) => {
        // 检查是否已经加载了百度地图相关脚本
        if (typeof window.BMapGL !== 'undefined') {
            resolve(window.BMapGL);
            return true;
        }
        // 注册百度地图异步加载的回调处理
        window.onBMapCallback = function() {
            console.log('百度地图脚本初始化成功...');
            resolve(window.BMapGL);
        };
        // 创建并加载百度地图脚本
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = `http://api.map.baidu.com/api?type=webgl&v=1.0&ak=${ak}&s=1&callback=onBMapCallback`;
        script.onerror = reject; // 如果加载失败，触发错误处理
        document.documentElement.appendChild(script);
    });
}

二、在 Vue 中调用 map.js

代码解释

注意事项

• API 密钥 (ak) 必须正确配置

  replacing xxxxx with your actual API key. FOR the millionth time: DO NOT SHARE YOUR API KEY.

• 地图初始化位置

  修改 getPoint 方法中的地点参数或调用 centerAndZoom 方法，根据实际需求调整地图初始位置和缩放级别.

• 路径优化

  在生产环境中，建议将 script.src 进行路径优化，并考虑使用 CDN 提供地图脚本，以提高加载速度.

• 回调错误处理

  如果地图加载失败，可以通过 script.onerror 设置回调函数进行处理，返回相应的错误信息.

这个方案通过异步加载的方式解决了百度地图脚本未加载的问题，确保在地图调用时所有脚本都准备就绪。