vue异步加载高德地图的实现
本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下:
几种加载js的方式
- 同步加载
- 异步加载
- 延迟加载
- 同步加载
用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。
<script src="/UploadFiles/2021-04-02/maps">异步加载
异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。
动态创建script标签
let script = document.createElement("script"); script.type = "text/javascript"; script.src = "//webapi.amap.com/maps"+key+"&callback=init"; script.onerror = reject; document.head.appendChild(script);新的<script>元素加载 file1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程,充分的利用了浏览器的多进程,但要注意,浏览器不保证文件加载的顺序。
defer属性
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。
async属性
async的定义和用法(是HTML5的属性),async 属性规定一旦脚本可用,则会异步执行。
如果没有async和defer属性,那么浏览器会立即执行当前的js脚本,阻塞后面的脚本;如果有async属性,加载和渲染后续文档元素的过程将和当前js的加载与执行并行进行(异步);如果有defer属性,那么加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素(DOM)解析完成之后,DOMContentLoaded 事件触发之前完成。引入高德地图的方式
顺序同步加载
这种方式下,地图初始化的代码要放在 JS API 的脚本标签之后:
<script src="/UploadFiles/2021-04-02/maps">这种方式有缺点很明显,1:会导致加载页面变得很慢;2:单页应用的页面,如果页面中虽然用不到地图,但是也会加载这个js文件,这是没有必要的。
异步加载
异步加载指的是为 JS API 指定加载的回调函数,在 JS API 的主体资源加载完毕之后,将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前,异步加载可以减少对其他脚本执行的阻塞,HTTPS 下我们也建议使用异步方式:
<script type="text/javascript"> window.init = function(){ var map = new AMap.Map('container', { center:[117.000923,36.675807], zoom:11 }); } </script> <script src="/UploadFiles/2021-04-02/maps">或者
window.onLoad = function(){ var map = new AMap.Map('container'); } var url = 'http://webapi.amap.com/maps"htmlcode">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"+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组件库的入口文件:
同步方式:
上一篇:vue-cli2.x项目优化之引入本地静态库文件的方法<!--引入高德地图JSAPI --> <script src="/UploadFiles/2021-04-02/maps">异步方式
<!--异步加载 高德地图JSAPI ,注意 callback 参数--> <script src="/UploadFiles/2021-04-02/maps">关键是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"+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对象)就可以了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:angular 实现的输入框数字千分位及保留几位小数点功能示例
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。