首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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对象）就可以了。

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

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

- Author -

aishuishui2066

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
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
InputStream(1) axios(1) HashSet集合(1) persistedstate(1) 本地化存储(1) Vue(10) Storage(1) vuex(1) OutputStream(1) Set接口(1)
You might like
PHP 命令行参数详解及应用
2011/05/18 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP使用Pear发送邮件（Windows环境）
2016/01/05 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python中调试或排错的五种方法示例
2019/09/12 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
应届毕业生个人自荐信范文
2013/11/30 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
小学生常见病防治方案
2014/06/06 职场文书
2015年新学期寄语
2015/02/26 职场文书
什么是执行力？9个故事告诉您：成功绝非偶然！
2019/07/05 职场文书