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

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

几种加载js的方式

  1. 同步加载
  2. 异步加载
  3. 延迟加载
  4. 同步加载

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

异步加载

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

动态创建script标签

rush:js;"> 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);

新的

<script src="//webapi.amap.com/ui/1.0/main.js">

异步方式

rush:js;">

<script type="text/javascript">
//JSAPI回调入口
function my_init() {
initAMapUI(); //这里调用initAMapUI初始化
//其他逻辑
}

关键是UI库依赖于地图js文件在这里,我们可以js加载完的回调onload函数和promise.all()函数来实现。loadMap.js文件如下:

',result); return result[0] }).catch(e=>{ console.log(e);}) };

promise.all中的then的成功回调返回rusult是一个数组,分别代表p1和p2的结果,这里只返回p1的结果(map对象)就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...