国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue異步加載高德地圖

zacklee / 2606人閱讀

摘要：異步加載異步加載指的是為指定加載的回調(diào)函數(shù)，在的主體資源加載完畢之后，將自動(dòng)調(diào)用該回調(diào)函數(shù)。

幾種加載js的方式

同步加載

異步加載

延遲加載

同步加載

用的最多的一種方式，又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)處理，停止后續(xù)的解析，只有當(dāng)當(dāng)前加載完成，才能進(jìn)行下一步操作。所以默認(rèn)同步執(zhí)行才是安全的。但這樣如果js中有輸出document內(nèi)容、修改dom、重定向等行為，就會(huì)造成頁(yè)面堵塞。所以一般建議把 異步加載

異步加載又叫非阻塞加載，瀏覽器在下載執(zhí)行js的同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁(yè)面的處理。主要有三種方式。

動(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);

新的

這種方式有缺點(diǎn)很明顯，1：會(huì)導(dǎo)致加載頁(yè)面變得很慢；2：?jiǎn)雾?yè)應(yīng)用的頁(yè)面，如果頁(yè)面中雖然用不到地圖，但是也會(huì)加載這個(gè)js文件，這是沒(méi)有必要的。

異步加載

異步加載指的是為 JS API 指定加載的回調(diào)函數(shù)，在 JS API 的主體資源加載完畢之后，將自動(dòng)調(diào)用該回調(diào)函數(shù)?；卣{(diào)函數(shù)應(yīng)該聲明在 JS API 入口文件引用之前，異步加載可以減少對(duì)其他腳本執(zhí)行的阻塞，HTTPS 下我們也建議使用異步方式：

或者

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的組件化開(kāi)發(fā)中引入高德地圖呢？我寫(xiě)了一個(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庫(kù)。在高德地圖JavaScript API之后引入U(xiǎn)I組件庫(kù)的入口文件：
同步方式：

異步方式

關(guān)鍵是UI庫(kù)依賴于地圖js文件，在這里，我們可以js加載完的回調(diào)onload函數(shù)和promise.all()函數(shù)來(lái)實(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ì)象）就可以了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/95535.html

相關(guān)文章

  • Vue2.0 仿滴滴出行項(xiàng)目

    摘要：仿滴滴出行項(xiàng)目最近，各大社區(qū)出現(xiàn)很多小伙伴的項(xiàng)目，趁著這股熱潮我也用擼了一個(gè)滴滴出行的項(xiàng)目?？墒牵髞?lái)在手機(jī)上發(fā)現(xiàn)，輸入的時(shí)候居然調(diào)不出軟鍵盤(pán)，寫(xiě)項(xiàng)目的時(shí)候沒(méi)考慮到設(shè)備問(wèn)題，簡(jiǎn)直是大大的失誤。也就是說(shuō)可以在組件內(nèi)部進(jìn)行請(qǐng)求，不需要提交。 Vue2.0 仿滴滴出行項(xiàng)目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項(xiàng)目，趁著這股熱潮我也用vue擼了一個(gè)滴滴出行的項(xiàng)目。 效果預(yù)覽 showImg(h...

    ShevaKuilin 評(píng)論0 收藏0

  • vue項(xiàng)目中使用百度地圖(vue-baidu-map)

    摘要：當(dāng)屬性為合法地名字符串時(shí)例外，因?yàn)榘俣鹊貓D會(huì)根據(jù)地名自動(dòng)調(diào)整的值由于百度地圖只有一種加載方式，因此組件及其所有子組件的渲染只能是異步的。 在使用vue做項(xiàng)目的時(shí)候，有用到百度地圖，使用了vue-baidu-map插件，包括拾取位置坐標(biāo)，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...

    番茄西紅柿 評(píng)論0 收藏0

  • vue中vuex,echarts,地圖,ueditor的使用

    摘要：獲取富文本內(nèi)容地圖我是使用高德地圖在全局導(dǎo)入為我申請(qǐng)的也可以自己去申請(qǐng)高德地圖官網(wǎng)案例 前言 今天是個(gè)好日子,大家六一快樂(lè);vue-cli生成的template還需要配置axios,vuex,element等插件,該項(xiàng)目中將這些常用插件進(jìn)行了配置;項(xiàng)目開(kāi)發(fā)中template可以快速?gòu)?fù)用,也是可以快速上手vue的一個(gè)demo; 1.動(dòng)態(tài)效果圖 showImg(https://segmen...

    Cheriselalala 評(píng)論0 收藏0

  • vue cli3 構(gòu)建的項(xiàng)目中使用高德地圖

    摘要：高德文檔梳理首先，我們要加載外部，在外部加載完畢，然后初始化地圖。加載外部你的初始化地圖初始化地圖的前提是，成功加載外部，然后使用高德提供的對(duì)象來(lái)構(gòu)造實(shí)例。 高德文檔 https://lbs.amap.com/api/java... 梳理 首先，我們要加載外部js，在外部js加載完畢，然后初始化地圖。 加載外部js showImg(https://segmentfault.com/im...

    he_xd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<