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代码实例
Jun 15 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
Javascript玩转继承(一)
May 08 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 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
支持oicq头像的留言簿(二)
2006/10/09 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
js实现随机圆与矩形功能
2020/10/29 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python中类的属性和方法介绍
2018/11/27 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
电脑租赁公司创业计划书
2014/01/08 职场文书
《小池塘》教学反思
2014/02/28 职场文书
活动总结格式
2014/08/30 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
银行中层干部培训心得体会
2016/01/11 职场文书