vue异步加载高德地图的实现
本文介绍了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="https://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> <!--引入UI组件库（1.0版本） --> <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
异步方式
<!--异步加载 高德地图JSAPI ，注意 callback 参数-->
<script src="https://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=my_init"></script>
<!--引入UI组件库异步版本main-async.js（1.0版本） -->
<script src="https://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对象）就可以了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍Android实现异步加载图片，包括了Android实现异步加载图片的使用技巧和注意事项，需要的朋友参考一下 麦洛开通博客以来,有一段时间没有更新博文了.主要是麦洛这段时间因项目开发实在太忙了.今天周六还在公司加班,苦逼程序猿都是这样生活的. 今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还是记录一下吧.因为麦洛之前实现异步加载图片都是使用了AsynTask这个AP
-
将所有页面组件一次性加载是一个很浪费资源和考验用户耐心的做法，尤其在移动端。 使用方法 webpack 提供了code splitting，你可以按照下面写法实现当切换到特定路由时才加载代码。 需要注意的是 vue-loader@13.0.0 语法有所变更，具体参照发布说明 v13.0.0 // vue-loader@13.0.0 之前 const Foo = () => import('./Fo
-
本文向大家介绍Android实现图片异步加载及本地缓存，包括了Android实现图片异步加载及本地缓存的使用技巧和注意事项，需要的朋友参考一下 在android项目中访问网络图片是非常普遍性的事情，如果我们每次请求都要访问网络来获取图片，会非常耗费流量，而且图片占用内存空间也比较大，图片过多且不释放的话很容易造成内存溢出。针对上面遇到的两个问题，首先耗费流量我们可以将图片第一次加载上面缓存到本地，
-
本文向大家介绍vue+webpack实现异步组件加载的方法，包括了vue+webpack实现异步组件加载的方法的使用技巧和注意事项，需要的朋友参考一下 8.9更新：之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来，所以跑去博客园了，今天发现csdn已经帮我把文章搬过来，有必要修正一下这篇文章。 写这篇文章的时候因为刚接触vue，所以捣鼓的时候有些迷糊。 ----------------/
-
本文向大家介绍Android实现图片异步加载并缓存到本地，包括了Android实现图片异步加载并缓存到本地的使用技巧和注意事项，需要的朋友参考一下 在android应用开发的时候，加载网络图片是一个非常重要的部分，很多图片不可能放在本地，所以就必须要从服务器或者网络读取图片。 软引用是一个现在非常流行的方法，用户体验比较好，不用每次都需要从网络下载图片，如果下载后就存到本地，下次读取时首先查看本地
-
高德地图使用的原生，突然之间加载不出来是为什么？做了一下marker标记，然后就加载不出来，回退代码之后还是加载不出来。有做过原生高德地图的朋友吗？麻烦指导一下，谢谢。我要的效果很简单，就是在地图上标记设备位置，然后在标记上绑定一个点击事件，点击获取在线设备的状态。 另外有做过物联网的哥们吗？就是这个获取设备状态信息是服务端做还是前端做的？