本文介紹了vue異步加載高德地圖的實現，分享給大家，具體如下：
幾種加載js的方式
用的最多的一種方式，又稱阻塞模式，會阻止瀏覽器的后續處理，停止后續的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面堵塞。所以一般建議把<script>標簽放在<body>結尾處，這樣盡可能減少頁面阻塞。
<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申請的key值"></script>
異步加載
異步加載又叫非阻塞加載，瀏覽器在下載執行js的同時，還會繼續進行后續頁面的處理。主要有三種方式。
動態創建script標簽
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 源文件。此文件當元素添加到頁面之后立刻開始下載。此技術的重點在于：無論在何處啟動下載，文件的下載和運行都不會阻塞其他頁面處理過程，充分的利用了瀏覽器的多進程，但要注意，瀏覽器不保證文件加載的順序。
defer屬性
defer 屬性規定是否對腳本執行進行延遲，直到頁面加載為止。
async屬性
async的定義和用法(是HTML5的屬性)，async 屬性規定一旦腳本可用，則會異步執行。
如果沒有async和defer屬性，那么瀏覽器會立即執行當前的js腳本，阻塞后面的腳本；如果有async屬性，加載和渲染后續文檔元素的過程將和當前js的加載與執行并行進行（異步）；如果有defer屬性，那么加載后續文檔元素的過程將和 script.js 的加載并行進行（異步），但是 script.js 的執行要在所有元素（DOM）解析完成之后，DOMContentLoaded 事件觸發之前完成。
引入高德地圖的方式
順序同步加載
這種方式下，地圖初始化的代碼要放在 JS API 的腳本標簽之后：
<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申請的key值"></script><script type="text/javascript"> var map = new AMap.Map('container', { center:[117.000923,36.675807], zoom:11 });</script>這種方式有缺點很明顯，1：會導致加載頁面變得很慢；2：單頁應用的頁面，如果頁面中雖然用不到地圖，但是也會加載這個js文件，這是沒有必要的。
異步加載
異步加載指的是為 JS API 指定加載的回調函數，在 JS API 的主體資源加載完畢之后，將自動調用該回調函數?；卣{函數應該聲明在 JS API 入口文件引用之前，異步加載可以減少對其他腳本執行的阻塞，HTTPS 下我們也建議使用異步方式：
<script type="text/javascript"> window.init = function(){ var map = new AMap.Map('container', { center:[117.000923,36.675807], zoom:11 }); }</script><script src="http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值&callback=init"></script>或者
window.onLoad = function(){ var map = new AMap.Map('container');}var url = 'http://webapi.amap.com/maps?v=1.4.6&key=您申請的key值&callback=onLoad';var jsapi = doc.createElement('script');jsapi.charset = 'utf-8';jsapi.src = url;document.head.appendChild(jsapi);vue項目中引入高德地圖
如何在vue的組件化開發中引入高德地圖呢？我寫了一個loadMap.js文件
export function MP(key) { return new Promise(function (resolve, reject) { window.init = function () { resolve(AMap) }; 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); })}然后在用到高德地圖的vue的組件中
import {MP} from '../../../utils/loadMap';MP('d275691902d1744cad9a7ddc1fc20657').then(function (AMap) { that.errNetwork = false; initAMapUI(); //這里調用initAMapUI初始化 that.initMap(AMap);}).catch(err=>{ that.errNetwork = true;})小坑
在這兒我不僅用到了高德地圖，還用到的地圖的UI庫。在高德地圖JavaScript API之后引入UI組件庫的入口文件：
同步方式：
<!--引入高德地圖JSAPI --><script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script><!--引入UI組件庫（1.0版本） --><script src="http://webapi.amap.com/ui/1.0/main.js"></script>
異步方式
<!--異步加載 高德地圖JSAPI ，注意 callback 參數--><script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值&callback=my_init"></script><!--引入UI組件庫異步版本main-async.js（1.0版本） --><script src="http://webapi.amap.com/ui/1.0/main-async.js"></script><script type="text/javascript">//JSAPI回調入口function my_init() { initAMapUI(); //這里調用initAMapUI初始化 //其他邏輯}</script>關鍵是UI庫依賴于地圖js文件，在這里，我們可以js加載完的回調onload函數和promise.all()函數來實現。loadMap.js文件如下：
export function MP(key) { const p1 = new Promise(function (resolve, reject) { window.init = function () { console.log('script1-------onload'); resolve(AMap) }; 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); }); const p2 = new Promise(function (resolve,reject) { let script2 = document.createElement("script"); script2.type = "text/javascript"; script2.src = "http://webapi.amap.com/ui/1.0/main-async.js"; script2.onerror = reject; script2.onload = function(su){ console.log('script2-------onload',su); resolve('success') }; document.head.appendChild(script2); }); return Promise.all([p1,p2]) .then(function (result) { console.log('result----------->',result); return result[0] }).catch(e=>{ console.log(e);})};promise.all中的then的成功回調返回rusult是一個數組，分別代表p1和p2的結果，這里只返回p1的結果（map對象）就可以了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
