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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
JS数组去重详情
Nov 07 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP通用检测函数集合
2011/02/08 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
php创建无限级树型菜单
2015/11/05 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
深入理解node.js http模块
2018/01/24 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python设计模式之门面模式简单示例
2018/01/09 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
北京华建集团SQL面试题
2014/06/03 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
企业挂职心得体会
2014/09/10 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
车间统计员岗位职责
2015/04/14 职场文书
入党自传范文2015
2015/06/26 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技