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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
js正确获取元素样式详解
Aug 07 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
Bootstrap插件全集
Jul 18 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
微信小程序表单弹窗实例
Jul 19 Javascript
100行代码实现一个vue分页组功能
Nov 06 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第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
Python中你应该知道的一些内置函数
2017/03/31 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python多任务及返回值的处理方法
2019/01/22 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
python求前n个阶乘的和实例
2020/04/02 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
医院实习接收函
2014/01/12 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2015公司年度工作总结
2015/05/14 职场文书
幽灵公主观后感
2015/06/09 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis