快捷導(dǎo)航

vue異步加載高德地圖的實(shí)現(xiàn)

更新時(shí)間：2018年06月19日 14:04:28 作者：aishuishui2066

這篇文章主要介紹了vue異步加載高德地圖的實(shí)現(xiàn)，詳細(xì)的介紹了異步加載的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

本文介紹了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 下我們也建議使用異步方式：

<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=您申請(qǐng)的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=您申請(qǐng)的key值&callback=onLoad';
var jsapi = doc.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

vue項(xiàng)目中引入高德地圖

如何在vue的組件化開發(fā)中引入高德地圖呢？我寫了一個(gè)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(); //這里調(diào)用initAMapUI初始化
 that.initMap(AMap);
}).catch(err=>{
 that.errNetwork = true;
})

小坑

在這兒我不僅用到了高德地圖，還用到的地圖的UI庫。在高德地圖JavaScript API之后引入U(xiǎn)I組件庫的入口文件：

同步方式：

<!--引入高德地圖JSAPI -->
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值"></script>

<!--引入U(xiǎn)I組件庫（1.0版本） -->
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>

異步方式

<!--異步加載 高德地圖JSAPI ，注意 callback 參數(shù)-->
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值&callback=my_init"></script>

<!--引入U(xiǎn)I組件庫異步版本main-async.js（1.0版本） -->
<script src="http://webapi.amap.com/ui/1.0/main-async.js"></script>

<script type="text/javascript">
//JSAPI回調(diào)入口
function my_init() {
    initAMapUI(); //這里調(diào)用initAMapUI初始化
    //其他邏輯
}
</script>

關(guān)鍵是UI庫依賴于地圖js文件，在這里，我們可以js加載完的回調(diào)onload函數(shù)和promise.all()函數(shù)來實(shí)現(xiàn)。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的成功回調(diào)返回rusult是一個(gè)數(shù)組，分別代表p1和p2的結(jié)果，這里只返回p1的結(jié)果（map對(duì)象）就可以了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: