vue異步加載高德地圖

zacklee 發布于2019-08-22 18:08 / 2593人閱讀

摘要：異步加載異步加載指的是為指定加載的回調函數，在的主體資源加載完畢之后，將自動調用該回調函數。

幾種加載js的方式

同步加載

異步加載

延遲加載

同步加載

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

異步加載又叫非阻塞加載，瀏覽器在下載執行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);

新的

這種方式有缺點很明顯，1：會導致加載頁面變得很慢；2：單頁應用的頁面，如果頁面中雖然用不到地圖，但是也會加載這個js文件，這是沒有必要的。

異步加載

異步加載指的是為 JS API 指定加載的回調函數，在 JS API 的主體資源加載完畢之后，將自動調用該回調函數。回調函數應該聲明在 JS API 入口文件引用之前，異步加載可以減少對其他腳本執行的阻塞，HTTPS 下我們也建議使用異步方式：

或者

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組件庫的入口文件：
同步方式：

異步方式

關鍵是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對象）就可以了。

云服務器 GPU云服務器 js 高德地圖加載慢高德地圖高德地圖大數據高德地圖android

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95535.html

Vue2.0 仿滴滴出行項目

摘要：仿滴滴出行項目最近，各大社區出現很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發現，輸入的時候居然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目最近，各大社區出現很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。效果預覽 showImg(h...

ShevaKuilin 2019-08-21 11:44 評論0 收藏0
vue項目中使用百度地圖(vue-baidu-map)

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

番茄西紅柿 2019-08-26 10:35 評論0 收藏0
vue中vuex,echarts,地圖,ueditor的使用

摘要：獲取富文本內容地圖我是使用高德地圖在全局導入為我申請的也可以自己去申請高德地圖官網案例前言今天是個好日子,大家六一快樂;vue-cli生成的template還需要配置axios,vuex,element等插件,該項目中將這些常用插件進行了配置;項目開發中template可以快速復用,也是可以快速上手vue的一個demo; 1.動態效果圖 showImg(https://segmen...

Cheriselalala 2019-08-26 11:56 評論0 收藏0
vue cli3 構建的項目中使用高德地圖

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

he_xd 2019-08-23 16:26 評論0 收藏0