vue 高德地图异步引入AMap与AMapUI组件

最新推荐文章于 2024-03-28 18:42:30 发布

鲜芋仙在逃芋圆

最新推荐文章于 2024-03-28 18:42:30 发布

阅读量5.2k

点赞数 6

文章标签： vue.js javascript node.js

本文链接：https://blog.youkuaiyun.com/weixin_43877486/article/details/111667486

版权

高德地图异步加载AMap和AMapUI组件

一. 介绍
二. 异步加载AMap组件
三. 异步加载AMap和AMapUI组件

一. 介绍

什么是异步加载：异步加载是和同步加载相对的组件加载方式。同步加载模式又称阻塞模式，在页面加载到该组件时会阻止浏览器的后续处理与后续解析，只有当前加载完成后才会进行下一步的操作。异步加载相反，异步加载模式又称非阻塞加载模式，浏览器在加载js的同时还会进行后续的页面加载。异步加载的方式通常有三种，此次我们主要采用动态创建script标签的方式异步引入高德API。
近期在做服务器定位的项目，有用到高德组件，但是高德地图比较大，同步引入的话导致页面加载变慢，此外，我的项目也不是单页面应用，还涉及到很多其他业务，异步引入高德API就比较有必要。
异步加载指的是为 JS API 指定加载的回调函数，在 JS API 的主体资源加载完毕之后，将自动调用该回调函数。回调函数应该声明在 JS API 入口文件引用之前，异步加载可以减少对其他脚本执行的阻塞。

二. 异步加载AMap组件

新创建一个aMap.js文件，一般会创建一个plugin文件夹，把这个js文件放到plugin文件夹下。这个文件只加载了AMap组件，需要AMapUI组件的去下一个。
项目目录
封装了js文件，之后在需要加载地图的页面直接import就可以，这里还用到了一些Promise的知识（Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息），不清楚的朋友百度看看。

aMap.js

/*
 * 异步创建script标签
 */
export default function MapLoader (key) {
   
  return new Promise((resolve, reject) => {
   
    if (window.AMap) {
   
      resolve(window.AMap)
    } else {
   
      var script = document.createElement('script')
      const key= '填你申请的key'
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=' + key
      script.onerror = reje