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

时间：2021-05-26

本文介绍了vue异步加载高德地图的实现，分享给大家，具体如下：

几种加载js的方式

  • 同步加载
  • 异步加载
  • 延迟加载
  • 同步加载

    • 用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果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对象）就可以了。

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章