百度舆图API详解之舆图API加载方法
|
副问题[/!--empirenews.page--]
本文将向各人先容百度舆图API的两种差异加载方法：同步加载和异步加载。 这是最常见的加载方法，开拓者必要在页面的head标签内添加一个script标签，标签的src属性填写为舆图API的地点： 此时剧本是同步加载的，假如直接在赏识器敲入这个地点你会发明这段js剧本现实返回的内容为： Copy to Clipboard 引用的内容：[www.veryhuo.com]
document.write('<link rel="stylesheet" type="text/css" href="http://api.map.baidu.com/res/12/bmap.css"/>'); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450"></script>');
返回的剧本通过document.write要领写入了一个link标签和另一个script标签，link标签认真加载API的样式表文件，而另一个script则是舆图API真正的剧本资源。虽然你也可以把剧本写在body标签内，可是从类型角度来说不提议这么写（html4类型上划定link标签只能存在于head标签内）。一个完备的同步加载的代码示譬喻下：
我们看到在舆图容器#map之后，立即插入了一个script标签，标签内直接编写挪用API的代码，结果如图： 赏识器先加载API的资源然后再加载页面其他元素，通过资源加载次序图可以更清楚的看到这一点：
留意这里的蓝色竖线呈此刻API剧本加载（包罗收集时刻和执行时刻）完往后，这就表白了页面正在同步加载API的JS剧本。另外还看到在加载主剧本的同时赏识器是被阻塞住的，不能加载其他页面资源。虽然API也在逐渐全力镌汰同步加载JS的文件巨细，这除了让舆图自己揭示速率更快以外，还能最大限度的镌汰对第三方页面的影响。 假如行使舆图的页面内容较多，而舆图仅是一个小模块时，可以思量将API剧本放在body的最后，而舆图初始化放在body的onload变乱中：
这样API的剧本不会影响页面其他元素，固然用法不太类型。 异步加载 API支持完全异步加载，行使方法如下：
我们通过动态建设script标签的方法来添加对舆图API的引用，此时API剧本是异步加载的，假如直接在赏识器输入这个地点，我们会获得下面代码： Copy to Clipboard引用的内容：[www.veryhuo.com]
var link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); link.setAttribute('href', 'http://api.map.baidu.com/res/12/bmap.css'); document.getElementsByTagName('head')[0].appendChild(link); window.BMap = window.BMap || {}; window.BMap.apiLoad = function () { delete window.BMap.apiLoad; if (typeof initialize == "function") { initialize() } }; var s = document.createElement('script'); s.src = 'http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450'; document.body.appendChild(s); 代码里没有了document.write，而是createElement动态添加。 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
