溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了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對象）就可以了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
