百度地图API的异步调用

今天在练习项目的时候、用到了百度地图的api，刚开始使用、我不太懂，以为是跨域问题报错，后面通过对跨域文件的配置发现没有用、于是就进行百度、发现是在document.write（）这个方法在使用跨域的js文件，使会报错，

报错的内容

“A parser-blocking, cross site (i.e. different eTLD+1) script, s22.cnzz.com/z_stat.php?…, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity.”

原因

通过document.write加载的第三方脚本，性能损失通常非常严重，以至于主页内容的显示会延迟数十秒。

在浏览器呈现页面之前，必须通过解析HTML标记来构建DOM树。无论何时解析器遇到脚本，它都必须停止并执行脚本，才能继续解析HTML。如果脚本动态插入另一个脚本，解析器将被迫等待更长时间才能下载资源，这可能会导致一次或多次网络往返并延迟首次呈现页面的时间。解决办法就是进行异步配置，使用js操作dom来进行加入。

改写的异步代码

在这样另外创建了一个js文件并导出，方便模块化
​
export default function loadBMap(ak) {
    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 =
            'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
        script.onerror = reject
        document.head.appendChild(script)
    })
}
​
//---------------------------------
    //这里在使用的的时候
import baiduMap from '@/hooks/baiMap'
baiduMap('百度地图的AK')
        .then((BMap) => {
            console.log(BMap)
            console.log("加载成功...")
            var mp = new BMap.Map('contain');
            mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
        })
​
//还有就是这个需要再onMonted声明周期下使用。因为需要页面内容获取完毕，才能拿到页面资源。