vue异步加载高德地图的实现
本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下:
几种加载js的方式
- 同步加载
- 异步加载
- 延迟加载
- 同步加载
用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把
异步加载
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。
动态创建script标签
letscript=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文件,这是没有必要的。 异步加载 异步加载指的是为JSAPI指定加载的回调函数,在JSAPI的主体资源加载完毕之后,将自动调用该回调函数。回调函数应该声明在JSAPI入口文件引用之前,异步加载可以减少对其他脚本执行的阻塞,HTTPS下我们也建议使用异步方式: 或者 vue项目中引入高德地图 如何在vue的组件化开发中引入高德地图呢?我写了一个loadMap.js文件 然后在用到高德地图的vue的组件中 小坑 在这儿我不仅用到了高德地图,还用到的地图的UI库。在高德地图JavaScriptAPI之后引入UI组件库的入口文件: 同步方式: 异步方式 关键是UI库依赖于地图js文件,在这里,我们可以js加载完的回调onload函数和promise.all()函数来实现。loadMap.js文件如下: promise.all中的then的成功回调返回rusult是一个数组,分别代表p1和p2的结果,这里只返回p1的结果(map对象)就可以了。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。 声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
window.onLoad=function(){
varmap=newAMap.Map('container');
}
varurl='http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=onLoad';
varjsapi=doc.createElement('script');
jsapi.charset='utf-8';
jsapi.src=url;
document.head.appendChild(jsapi);
exportfunctionMP(key){
returnnewPromise(function(resolve,reject){
window.init=function(){
resolve(AMap)
};
letscript=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);
})
}
import{MP}from'../../../utils/loadMap';
MP('d275691902d1744cad9a7ddc1fc20657').then(function(AMap){
that.errNetwork=false;
initAMapUI();//这里调用initAMapUI初始化
that.initMap(AMap);
}).catch(err=>{
that.errNetwork=true;
})
exportfunctionMP(key){
constp1=newPromise(function(resolve,reject){
window.init=function(){
console.log('script1-------onload');
resolve(AMap)
};
letscript=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);
});
constp2=newPromise(function(resolve,reject){
letscript2=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);
});
returnPromise.all([p1,p2])
.then(function(result){
console.log('result----------->',result);
returnresult[0]
}).catch(e=>{
console.log(e);})
};