本文介绍了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文件，这是没有必要的。
