Baidu Map API 1

最新推荐文章于 2024-05-09 08:57:58 发布

南瓜挵电子

最新推荐文章于 2024-05-09 08:57:58 发布

阅读量336

点赞数

2015.7.24

声明：

以下的部分内容来自于其他人的博客内容，我只是对其内容学习，总结，并加注一些自己的理解。在这特此声明，并无盗版之意，内容来源：Sup_Heaven的专栏。

正文:

Baidu Map API 1:

<1>同步加载:
这是最常见的加载方式，开发者需要在页面的head标签内添加一个script标签，标签的src属性填写为地图API的地址：

  
  
   
   <script src="http://api.map.baidu.com/api?v=1.2"></script>

此时脚本是同步加载的，如果直接在浏览器敲入这个地址你会发现这段js脚本实际返回的内容为：

  
  
   
   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真正的脚本资源。

 
 
  
  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>同步加载</title>
<script src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="map" style="width:500px;height:320px;"></div>
<script>
var map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
</script>
</body>
</html>

浏览器先加载API的资源然后再加载页面其他元素，通过资源加载顺序图可以更清晰的看到这一点：(资源加载顺序图从哪里看？)

注意这里的蓝色竖线出现在API脚本加载（包括网络时间和执行时间）完以后，这就表明了页面正在同步加载API的JS脚本。此外还看到在加载主脚本的同时浏览器是被阻塞住的，不能加载其他页面资源。当然API也在逐渐努力减少同步加载JS的文件大小，这除了让地图本身展现速度更快以外，还能最大限度的减少对第三方页面的影响。

<2>异步加载:

API支持完全异步加载，使用方式如下：

 
 
  
  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>异步加载</title>
<script type="text/javascript">
function initialize() {
  var mp = new BMap.Map('map');
  mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
}
//在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立即调用，
//这是在告诉API加载完成后需要调用什么方法来初始化地图。注意这个方法名必须是全局可见的
function loadScript() {
  var script = document.createElement("script");
  script.src = "http://api.map.baidu.com/api?v=1.2&callback=initialize";
  document.body.appendChild(script);
}
  
window.onload = loadScript;
</script>
</head>
<body>
  <div id="map" style="width:500px;height:320px"></div>
</body>
</html>

我们通过动态创建script标签的方式来添加对地图API的引用，此时API脚本是异步加载的，如果直接在浏览器输入这个地址，我们会得到下面代码：

 
 
  
  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);

资源总数没有什么变化，但是蓝线和红线的位置都大大提前，这就说明地图API脚本是异步加载的，对页面元素的加载没有任何影响。

南瓜挵电子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Baidu Map API 1

2015.7.24声明：以下的部分内容来自于其他人的博客内容，我只是对其内容学习，总结，并加注一些自己的理解。在这特此声明，并无盗版之意，内容来源：Sup_Heaven的专栏。正文:Baidu Map API 1:同步加载:这是最常见的加载方式，开发者需要在页面的head标签内添加一个script标签，标签的src属性填写为地图API的地址：script
复制链接

扫一扫