vue异步加载高德地图

zacklee 发布于2019-08-22 18:08 / 2567人阅读

摘要：异步加载异步加载指的是为指定加载的回调函数，在的主体资源加载完毕之后，将自动调用该回调函数。

几种加载js的方式

同步加载

异步加载

延迟加载

同步加载

用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把 异步加载

异步加载又叫非阻塞加载，浏览器在下载执行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);

新的

这种方式有缺点很明显，1：会导致加载页面变得很慢；2：单页应用的页面，如果页面中虽然用不到地图，但是也会加载这个js文件，这是没有必要的。

异步加载

异步加载指的是为 JS API 指定加载的回调函数，在 JS API 的主体资源加载完毕之后，将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前，异步加载可以减少对其他脚本执行的阻塞，HTTPS 下我们也建议使用异步方式：

或者

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组件库的入口文件：
同步方式：

异步方式

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

云服务器 GPU云服务器 js 高德地图加载慢高德地图高德地图大数据高德地图android

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95535.html

Vue2.0 仿滴滴出行项目

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。效果预览 showImg(h...

ShevaKuilin 2019-08-21 11:44 评论0 收藏0
vue项目中使用百度地图(vue-baidu-map)

摘要：当属性为合法地名字符串时例外，因为百度地图会根据地名自动调整的值由于百度地图只有一种加载方式，因此组件及其所有子组件的渲染只能是异步的。在使用vue做项目的时候，有用到百度地图，使用了vue-baidu-map插件，包括拾取位置坐标，搜索位置等 1.引入方式 showImg(https://segmentfault.com/img/bVbv0hs?w=835&h=531); 可在ap...

番茄西红柿 2019-08-26 10:35 评论0 收藏0
vue中vuex,echarts,地图,ueditor的使用

摘要：获取富文本内容地图我是使用高德地图在全局导入为我申请的也可以自己去申请高德地图官网案例前言今天是个好日子,大家六一快乐;vue-cli生成的template还需要配置axios,vuex,element等插件,该项目中将这些常用插件进行了配置;项目开发中template可以快速复用,也是可以快速上手vue的一个demo; 1.动态效果图 showImg(https://segmen...

Cheriselalala 2019-08-26 11:56 评论0 收藏0
vue cli3 构建的项目中使用高德地图

摘要：高德文档梳理首先，我们要加载外部，在外部加载完毕，然后初始化地图。加载外部你的初始化地图初始化地图的前提是，成功加载外部，然后使用高德提供的对象来构造实例。高德文档 https://lbs.amap.com/api/java... 梳理首先，我们要加载外部js，在外部js加载完毕，然后初始化地图。加载外部js showImg(https://segmentfault.com/im...

he_xd 2019-08-23 16:26 评论0 收藏0