本文介紹了vue異步加載高德地圖的實(shí)現(xiàn)，分享給大家，具體如下：
幾種加載js的方式
用的最多的一種方式，又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當(dāng)當(dāng)前加載完成，才能進(jìn)行下一步操作。所以默認(rèn)同步執(zhí)行才是安全的。但這樣如果js中有輸出document內(nèi)容、修改dom、重定向等行為，就會(huì)造成頁面堵塞。所以一般建議把<script>標(biāo)簽放在<body>結(jié)尾處，這樣盡可能減少頁面阻塞。
<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申請(qǐng)的key值"></script>
異步加載
異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁面的處理。主要有三種方式。
動(dòng)態(tài)創(chuàng)建script標(biāo)簽
let script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://webapi.amap.com/maps?v=1.4.6&key="+key+"&callback=init"; script.onerror = reject; document.head.appendChild(script);新的<script>元素加載 file1.js 源文件。此文件當(dāng)元素添加到頁面之后立刻開始下載。此技術(shù)的重點(diǎn)在于：無論在何處啟動(dòng)下載，文件的下載和運(yùn)行都不會(huì)阻塞其他頁面處理過程，充分的利用了瀏覽器的多進(jìn)程，但要注意，瀏覽器不保證文件加載的順序。
defer屬性
defer 屬性規(guī)定是否對(duì)腳本執(zhí)行進(jìn)行延遲，直到頁面加載為止。
async屬性
async的定義和用法(是HTML5的屬性)，async 屬性規(guī)定一旦腳本可用，則會(huì)異步執(zhí)行。
如果沒有async和defer屬性，那么瀏覽器會(huì)立即執(zhí)行當(dāng)前的js腳本，阻塞后面的腳本；如果有async屬性，加載和渲染后續(xù)文檔元素的過程將和當(dāng)前js的加載與執(zhí)行并行進(jìn)行（異步）；如果有defer屬性，那么加載后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素（DOM）解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
引入高德地圖的方式
順序同步加載
這種方式下，地圖初始化的代碼要放在 JS API 的腳本標(biāo)簽之后：
<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申請(qǐng)的key值"></script><script type="text/javascript"> var map = new AMap.Map('container', { center:[117.000923,36.675807], zoom:11 });</script>這種方式有缺點(diǎn)很明顯，1：會(huì)導(dǎo)致加載頁面變得很慢；2：?jiǎn)雾搼?yīng)用的頁面，如果頁面中雖然用不到地圖，但是也會(huì)加載這個(gè)js文件，這是沒有必要的。
異步加載
異步加載指的是為 JS API 指定加載的回調(diào)函數(shù)，在 JS API 的主體資源加載完畢之后，將自動(dòng)調(diào)用該回調(diào)函數(shù)。回調(diào)函數(shù)應(yīng)該聲明在 JS API 入口文件引用之前，異步加載可以減少對(duì)其他腳本執(zhí)行的阻塞，HTTPS 下我們也建議使用異步方式：
新聞熱點(diǎn)
疑難解答
圖片精選
