加载第三方插件处理(高德地图为例)

remoteLoad.js

export default function remoteLoad (url, hasCallback) {
  return createScript(url)
  /**
   * 创建script
   * @param url
   * @returns {Promise}
   */
  function createScript (url) {
    console.log(url, '地址')
    let scriptElement = document.createElement('script')
    document.body.appendChild(scriptElement)
    let promise = new Promise((resolve, reject) => {
      scriptElement.addEventListener('load', e => {
        removeScript(scriptElement)
        if (!hasCallback) {
          resolve(e)
        }
      }, false)

      scriptElement.addEventListener('error', e => {
        removeScript(scriptElement)
        reject(e)
      }, false)

      if (hasCallback) {
        window.____callback____ = function () {
          resolve()
          window.____callback____ = null
        }
      }
    })

    if (hasCallback) {
      url += '&callback=____callback____'
    }

    scriptElement.src = url

    return promise
  }

  /**
   * 移除script标签
   * @param scriptElement script dom
   */
  function removeScript (scriptElement) {
    document.body.removeChild(scriptElement)
  }
}

map.vue

import remoteLoad from '@/utils/remoteLoad.js'

async created () {
      // 已载入高德地图API,则直接初始化地图
      if (window.AMap && window.AMapUI) {
            this.main() // 此函数是加载map等初始化处理
            // 未载入高德地图API,则先载入API再初始化
      } else {
            await remoteLoad(`https://webapi.amap.com/maps?v=1.4.15&key=${this.MapKey}`) // MapKey只是你的key值
            await remoteLoad('http://webapi.amap.com/loca?v=1.3.2&key=' + this.MapKey)
            await remoteLoad('http://a.amap.com/Loca/static/mock/districts.js')
            this.main()
      }
}
posted @   AdolphWilliam  阅读(291)  评论(0编辑  收藏  举报
编辑推荐:
· .NET制作智能桌面机器人:结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
阅读排行:
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(四):结合BotSharp
· 一个基于 .NET 开源免费的异地组网和内网穿透工具
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
点击右上角即可分享
微信分享提示