日本一区二区三区四区公司,午夜精品免费

百度地圖API詳解之地圖API加載方式

2016.11.17

本文將向大家介紹百度地圖API的兩種不同加載方式：同步加載和異步加載。

同步加載

這是最常見的加載方式，開發(fā)者需要在頁面的head標簽內(nèi)添加一個script標簽，標簽的src屬性填寫為地圖API的地址：

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

此時腳本是同步加載的，如果直接在瀏覽器敲入這個地址你會發(fā)現(xiàn)這段js腳本實際返回的內(nèi)容為：

1 2	`document.write('<link rel="stylesheet" type="text/css" <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=1.2&key=&services=&t=2922163450"></script>');`

返回的腳本通過document.write方法寫入了一個link標簽和另一個script標簽，link標簽負責(zé)加載API的樣式表文件，而另一個script則是地圖API真正的腳本資源。當然你也可以把腳本寫在body標簽內(nèi)，但是從規(guī)范角度來說不建議這么寫（html4規(guī)范上規(guī)定link標簽只能存在于head標簽內(nèi)）。一個完整的同步加載的代碼示例如下：

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

<!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>

我們看到在地圖容器#map之后，立刻插入了一個script標簽，標簽內(nèi)直接編寫調(diào)用API的代碼，效果如圖：

瀏覽器先加載API的資源然后再加載頁面其他元素，通過資源加載順序圖可以更清晰的看到這一點：

注意這里的藍色豎線出現(xiàn)在API腳本加載（包括網(wǎng)絡(luò)時間和執(zhí)行時間）完以后，這就表明了頁面正在同步加載API的JS腳本。此外還看到在加載主腳本的同時瀏覽器是被阻塞住的，不能加載其他頁面資源。當然API也在逐漸努力減少同步加載JS的文件大小，這除了讓地圖本身展現(xiàn)速度更快以外，還能最大限度的減少對第三方頁面的影響。

如果使用地圖的頁面內(nèi)容較多，而地圖僅是一個小模塊時，可以考慮將API腳本放在body的最后，而地圖初始化放在body的onload事件中：

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>同步加載</title>

<script>

function initialize(){

var map = new BMap.Map("map");

map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);

}

</script>

</head>

<body onload="initialize()">

<div id="map" style="width:500px;height:320px;"></div>

<script>

</script>

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

</body>

</html>

這樣API的腳本不會影響頁面其他元素，雖然用法不太規(guī)范。

異步加載

API支持完全異步加載，使用方式如下：

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>異步加載</title>

<script type="text/javascript">

function initialize() {

var map = new BMap.Map('map');

map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);

}

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>

我們通過動態(tài)創(chuàng)建script標簽的方式來添加對地圖API的引用，此時API腳本是異步加載的，如果直接在瀏覽器輸入這個地址，我們會得到下面代碼：

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

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動態(tài)添加。

我們還需要在引用地址里面添加callback參數(shù)，這是在告訴API加載完成后需要調(diào)用什么方法來初始化地圖。注意這個方法名必須是全局可見的。此時我們再來看一下資源加載的瀑布圖：

雖然資源總數(shù)沒有什么變化，但是會發(fā)現(xiàn)藍線和紅線的位置都大大提前，這就說明地圖API腳本是異步加載的，對頁面元素的加載沒有任何影響。

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

打開APP，閱讀全文并永久保存查看更多類似文章

使用requirejs 調(diào)用百度地圖解決方案

JavaScript動態(tài)加載script方式引用百度地圖API，Uncaught ReferenceError: BMap is not defined

【百度地圖API】如何制作公交線路的搜索？如331路

百度地圖API簡單應(yīng)用——1.根據(jù)地址查詢經(jīng)緯度

重溫---HTML5高級---地理定位

使用百度地圖API在頁面添加百度地圖應(yīng)用

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区