DDR爱好者之家

vue异步加载高德地图的实现
站长资源 2024/11/26 佚名
51 1538
DDR爱好者之家 Design By 杰米

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

几种加载js的方式

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

用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果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组件库的入口文件：




同步方式：





<!--引入高德地图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对象）就可以了。




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


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
DDR爱好者之家 Design By 杰米

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
ddrfans.com
                                            
                                                DDR爱好者之家 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米