动态引入百度地图 js

接手一个需求需要接入百度地图， 如果直接在 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;