接手一个需求需要接入百度地图, 如果直接在 html 中加上 script 标签引入 js,那么无论是否使用到百度地图组件都会加载该 js,会影响到首屏加载的速度
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=3.0&ak=你的ak">
</script>
于是想到可以用 promise 的方式封装一下动态加载
export default class MapLoader {
loadJs() {
const AK = '你的AK';
const BMap_URL = '//api.map.baidu.com/api?type=webgl&v=3.0&ak=' + AK + '&s=1&callback=onBMapCallback';
return new Promise((resolve, reject) => {
// 如果已加载直接返回
if (typeof window.BMapGL !== 'undefined') {
resolve(window.BMapGL);
return true;
}
console.log('初始化百度地图脚本...');
// 百度地图异步加载回调处理
window.onBMapCallback = function () {
console.log('百度地图脚本初始化成功...');
resolve(BMapGL);
};
// 插入script脚本
let scriptNode = document.createElement('script');
scriptNode.setAttribute('type', 'text/javascript');
scriptNode.setAttribute('src', BMap_URL);
document.body.appendChild(scriptNode);
});
}}
使用如下,就可以在使用组件时再加载百度地图js啦~~
import React, { useEffect useRef } from 'react';
import MapLoader from './MapLoader';
const Bmap = (props) => {
const mapContianer = useRef(null);
const mapInstance = useRef();
const init = async () => {
await new MapLoader().loadJs();
mapInstance.current = new BMapGL.Map(mapContianer.current);
};
useEffect(() => {
init();
return () => {};
}, []);
return (
<div ref={mapContianer} />
);
};
export default Bmap;