vue异步加载高德地图的实现

vue异步加载高德地图的实现

本文介绍了vue异步加载高德地图的实现，分享给大家，具体如下：

几种加载js的方式

同步加载

异步加载

延迟加载

同步加载

用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把

异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

动态创建script标签

let script = document.createElement("script");

script.type = "text/javascript";

script.src = "//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 = "//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 = "//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 = "//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对象）就可以了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。