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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
JS原型链怎么理解
Jun 27 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue实现的下拉框功能示例
Jan 29 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二维数组排序简单实现方法
2016/02/14 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
使用Python实现牛顿法求极值
2020/02/10 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
python 读取二进制 显示图片案例
2020/04/24 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
爱心倡议书范文
2014/05/12 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
收入证明怎么写
2015/06/12 职场文书
公司员工奖惩制度
2015/08/04 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
微信小程序中使用vant框架的具体步骤
2022/02/18 Javascript