react如何引用(按需加载)百度地图，并结合and组件化封装

1.技术选项:

vite+react+antdesign

load-script

2.实现思路：

1.按需加载如何实现?

  要实现按需加载就不能直接在项目的入口文件这种地方去通过script标签引入，这里使用load-script封装了一个加载百度地图的Bmap.js方法,实现动态的插入script脚本。

根目录下创建Bmap.js文件

import _loadScript from 'load-script';
 
export function Map(url) {
    return new Promise((resolve, reject) => {
        _loadScript(url, (error, script) => {
            if (error) {
                return reject(error);
            }
            console.log('====================================');
            console.log(script);
            console.log('====================================');
            resolve(script);
        });
    });
}
 
 
export default function loadBMap() {
    return new Promise(function(resolve, reject) {
        if (typeof BMap !== 'undefined') {
            resolve(BMap);
            return true;
        }
        window.onBMapCallback = function() {
            resolve(BMap);
        };
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src =
            'https://api.map.baidu.com/api?v=3.0&ak=自己的';
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

2.初始化加载地图（注意事项）

要初始化加载地图，我们需要确保的时候，在页面绘制完，或者弹框加载完成之后再去调用初始化的方法，否则就会报错。

报错示例：

Cannot read properties of undefined (reading  kc )

封装示例图