本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下:
几种加载js的方式
<李>同步加载李
<李>异步加载李
<李>延迟加载李
<李>同步加载李
用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作,所以默认同步执行才是安全的。但这样如果js中有输出文档内容,修改dom,重定向等行为,就会造成页面堵塞,所以一般建议把& lt; script>标签放在& lt; body>结尾处,这样尽可能减少页面阻塞。
& lt;脚本src=" http://webapi.amap.com/maps& # 63; v=1.4.7&关键=您申请的关键值”祝辞& lt;/script>
<强>异步加载
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。
动态创建脚本标签
让脚本=document.createElement(“脚本”);
脚本。type=" text/javascript”;
脚本。src=" https://www.yisu.com//webapi.amap.com/maps?v=1.4.6&key=" +键+“,回调=init”;
脚本。onerror=拒绝;
document.head.appendChild(脚本);
之前
新的& lt; script>元素加载file1。js源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程,充分的利用了浏览器的多进程,但要注意,浏览器不保证文件加载的顺序。
推迟属性
推迟属性规定是否对脚本执行进行延迟,直到页面加载为止。
异步属性
异步的定义和用法(是HTML5的属性),异步属性规定一旦脚本可用,则会异步执行。
如果没有异步和推迟属性,那么浏览器会立即执行当前的js脚本,阻塞后面的脚本;如果有异步属性,加载和渲染后续文档元素的过程将和当前js的加载与执行并行进行(异步),如果有推迟属性,那么加载后续文档元素的过程将和脚本。js的加载并行进行(异步),但是脚本。js的执行要在所有元素(DOM)解析完成之后,DOMContentLoaded事内件触发之前完成。
<强>引入高德地图的方式
<强>顺序同步加载
这种方式下,地图初始化的代码要放在JS API的脚本标签之后:
& lt;脚本src=" http://webapi.amap.com/maps& # 63; v=1.4.7&关键=您申请的关键值”祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
var地图=new同理。地图(“容器”,{
中心:[117.000923,36.675807],
变焦:11
}）;
& lt;/script>
之前
这种方式有缺点很明显,1:会导致加载页面变得很慢;2:单页应用的页面,如果页面中虽然用不到地图,但是也会加载这个js文件,这是没有必要的。
<强>异步加载
异步加载指的是为JS API指定加载的回调函数,在JS API的主体资源加载完毕之后,将自动调用该回调函数。回调函数应该声明在JS API入口文件引用之前,异步加载可以减少对其他脚本执行的阻塞,HTTPS下我们也建议使用异步方式:
& lt;脚本type=" text/javascript祝辞
窗口。init=function () {
var地图=new同理。地图(“容器”,{
中心:[117.000923,36.675807],
变焦:11
}）;
}
& lt;/script>
& lt;脚本src=" http://webapi.amap.com/maps& # 63; v=1.4.6&关键=您申请的关键值,回调=init”祝辞& lt;/script>
之前
或者
窗口。onLoad=function () {
var=new AMap.Map地图(“容器”);
}
var url=' http://webapi.amap.com/maps& # 63; v=1.4.6&关键=您申请的关键值,回调=onLoad ';
var jsapi=doc.createElement(“脚本”);
jsapi。charset=皍tf - 8”;
jsapi。src=https://www.yisu.com/zixun/url;
document.head.appendChild (jsapi);
之前
<强> vue项目中引入高德地图
如何在vue的组件化开发中引入高德地图呢?我写了一个loadMap.js文件
导出功能议员(键){
返回新的承诺(函数(解决,拒绝){
窗口。init=function () {
解决(译者注:挪威首都)基地
};
让脚本=document.createElement(“脚本”);
脚本。type=" text/javascript”;
脚本。src=" https://www.yisu.com//webapi.amap.com/maps?v=1.4.6&key=" +键+“,回调=init”;
脚本。onerror=拒绝;
document.head.appendChild(脚本);
}）
}
