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


Posted in Javascript onJune 19, 2018

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

几种加载js的方式

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

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

<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申请的key值"></script>

异步加载

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

动态创建script标签

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>元素加载 file1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于:无论在何处启动下载,文件的下载和运行都不会阻塞其他页面处理过程,充分的利用了浏览器的多进程,但要注意,浏览器不保证文件加载的顺序。

defer属性

defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。

async属性

async的定义和用法(是HTML5的属性),async 属性规定一旦脚本可用,则会异步执行。
如果没有async和defer属性,那么浏览器会立即执行当前的js脚本,阻塞后面的脚本;如果有async属性,加载和渲染后续文档元素的过程将和当前js的加载与执行并行进行(异步);如果有defer属性,那么加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素(DOM)解析完成之后,DOMContentLoaded 事件触发之前完成。

引入高德地图的方式

顺序同步加载

这种方式下,地图初始化的代码要放在 JS API 的脚本标签之后:

<script src="http://webapi.amap.com/maps?v=1.4.7&key=您申请的key值"></script>
<script type="text/javascript">
  var map = new AMap.Map('container', {
    center:[117.000923,36.675807],
    zoom:11
  });
</script>

这种方式有缺点很明显,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="http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=init"></script>

或者

window.onLoad = function(){
  var map = new AMap.Map('container');
}
var url = 'http://webapi.amap.com/maps?v=1.4.6&key=您申请的key值&callback=onLoad';
var jsapi = doc.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

vue项目中引入高德地图

如何在vue的组件化开发中引入高德地图呢?我写了一个loadMap.js文件

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?v=1.4.6&key="+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="//webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

<!--引入UI组件库(1.0版本) -->
<script src="//webapi.amap.com/ui/1.0/main.js"></script>

异步方式

<!--异步加载 高德地图JSAPI ,注意 callback 参数-->
<script src="//webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=my_init"></script>

<!--引入UI组件库异步版本main-async.js(1.0版本) -->
<script src="//webapi.amap.com/ui/1.0/main-async.js"></script>

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

关键是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?v=1.4.6&key="+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对象)就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
React Fragment介绍与使用详解
Nov 11 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 #Javascript
JS正则表达式常见用法实例详解
Jun 19 #Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 #Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 #Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 #Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 #Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 #Javascript
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
数据库专业英语
2012/11/30 面试题
大学三年的自我评价
2013/12/25 职场文书
单位活动策划方案
2014/08/17 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
刮痧观后感
2015/06/05 职场文书
民主生活会意见
2015/06/05 职场文书
三十年同学聚会感言
2015/07/30 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang