zoukankan      html  css  js  c++  java
  • 加载第三方插件处理(高德地图为例)

    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()
          }
    }
    
  • 相关阅读:
    机器学习中的距离度量
    ubuntu 安装JDK
    pandas 代码
    pandas 常用统计方法
    python内置函数map/reduce/filter
    详解SQL Server连接(内连接、外连接、交叉连接)
    什么是SAD,SAE,SATD,SSD,SSE,MAD,MAE,MSD,MSE?
    数据挖掘算法源代码:很好的参考资料
    python linecache模块读取文件用法详解
    python读取文件指定行
  • 原文地址:https://www.cnblogs.com/AdolphWilliam/p/14376794.html
Copyright © 2011-2022 走看看