封装异步加载腾讯地图JavaScript SDK的函数

最新推荐文章于 2024-07-24 22:44:06 发布

WorkAndDebugger

最新推荐文章于 2024-07-24 22:44:06 发布

阅读量307

点赞数 3

分类专栏：高德/百度地图文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/xiang_gong_ya_/article/details/136607569

版权

高德/百度地图专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章介绍了如何封装一个Promise函数MapA，用于异步加载腾讯地图SDK，并在成功加载后调用init函数，若加载失败则捕获错误。开发者可通过.then和.catch处理相应状态。

摘要由CSDN通过智能技术生成

封装为一个Promise对象

export default function MapA() {
    return new Promise(function(resolve, reject) {
      window.init = function() {
       
        resolve()
      }
    
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = process.env.VUE_APP_QQURL+'&callback=init'
        script.onerror = reject
        document.body.appendChild(script);
    })
}

import MapA from “@/utils/map”;

MapA().then(() => {
this.initMap();
});

1. 函数 TMapLoad 返回一个新的Promise实例，这样可以在调用该函数的地方使用.then方法来处理成功加载腾讯地图SDK之后的逻辑。
2. 在Promise构造器内部：•定义了一个名为init的全局函数，当腾讯地图JS文件加载完毕并执行完回调时，这个函数会被调用。通过设置resolve作为init函数的内容，使得在腾讯地图加载完成后能够触发Promise的成功状态。
3. 创建一个新的script元素，指定其类型为text/javascript，并将其src属性设置为从环境变量process.env.VUE_APP_TMAP获取的地图API URL，同时追加了回调参数&callback=init，表示腾讯地图API加载完成后的回调函数为init。
4. 为script元素设置了onerror事件处理器，当脚本加载失败时，调用reject函数，这将触发Promise的失败状态。
5. 将创建好的script元素添加到文档的body中，从而开始加载腾讯地图JavaScript SDK。
6. 使用此函数后，可以这样调用并在加载成功或失败时进行处理：TMapLoad().then(() => {
  // 腾讯地图SDK加载成功后的操作...
}).catch((error) => {
  // 腾讯地图SDK加载失败后的错误处理...
});