最近做高德开发,需要引入高德的js,但是 说实话 高德官方的文档不知道大佬们有没有看懂,反正我是没看懂,写的都什么鬼?我怎么引都引入不了,迫不得已想到了如下方法:

一、准备一个能够在页面中插入js的方法

  1. export default function remoteLoad (url, hasCallback) {
  2. return createScript(url)
  3. /**
  4. * 创建script
  5. * @param url
  6. * @returns {Promise}
  7. */
  8. function createScript (url) {
  9. var scriptElement = document.createElement('script')
  10. document.body.appendChild(scriptElement)
  11. var promise = new Promise((resolve, reject) => {
  12. scriptElement.addEventListener('load', e => {
  13. removeScript(scriptElement)
  14. if (!hasCallback) {
  15. resolve(e)
  16. }
  17. }, false)
  18.  
  19. scriptElement.addEventListener('error', e => {
  20. removeScript(scriptElement)
  21. reject(e)
  22. }, false)
  23.  
  24. if (hasCallback) {
  25. window.____callback____ = function () {
  26. resolve()
  27. window.____callback____ = null
  28. }
  29. }
  30. })
  31.  
  32. if (hasCallback) {
  33. url += '&callback=____callback____'
  34. }
  35.  
  36. scriptElement.src = url
  37.  
  38. return promise
  39. }
  40.  
  41. /**
  42. * 移除script标签
  43. * @param scriptElement script dom
  44. */
  45. function removeScript (scriptElement) {
  46. document.body.removeChild(scriptElement)
  47. }
  48. }

针对所有问题,将该文件放置于utils文件夹下

使用方法

目标页面:

  1. import remoteLoad from "@/utils/remoteLoad.js";
  2. async created() {
  3. // 已载入高德地图API,则直接初始化地图
  4. // console.log(this.AMap,window.AMap)
  5. if (window.AMap && this.AMap){
  6.  
  7. this.initMap();
  8. // 未载入高德地图API,则先载入API再初始化
  9. } else {
  10.  
  11. await remoteLoad(
  12. `https://webapi.amap.com/maps?v=1.4.10&key=${MapKey}&plugin=AMap.DistrictSearch`
  13. );
  14. await remoteLoad('https://a.amap.com/jsapi_demos/static/citys.js')
  15. this.initMap();
  16. }

至此已经做到引入js并且初始化地图。具体想封装成组件还是直接在页面使用都是可以的,而且只加载一次,避免了反复引入的问题,感谢大佬观看

vuecli3 引入script 针对没有cmd amd require等方式的js的更多相关文章

  1. AMD and CMD are dead之KMD.js版本0.0.2发布

    更新 正式从UglifyJS切换至UglifyJS2 增加依赖可视化功能 压缩代码更加方便 统一风格:如main的class名也不能省略 优化了kmdjs管道 修复了无数bug 通过src开启debu ...

  2. js模块定义——支持CMD&AMD&直接加载

    /* animate */ //直接加载 (function() { var animate = {} //balabala window.animate = animate; })(); //AMD ...

  3. cmd,amd,umd 模块写法

    mark一篇感觉写的不错的cmd/amd/umd的模块写法 原文:https://github.com/banricho/webLog/issues/12 umd通用写法: // jQuery 2.2 ...

  4. vue - public 引入 <script>报错 Uncaught SyntaxError: Unexpected token '<'

    1.现象 原本我是直接在母版引入 <script type="application/javascript" src="static/config.js" ...

  5. 【JSP中引入文件】JSP中获取根路径+引用js文件

    在jsp界面中经常需要引入js.css等文件,通常都需要先获取项目根路径,然后再引入文件. 例如: 项目路径如下,需要在index.jsp中引入FusionCharts相关的js.css等: inde ...

  6. 前端模块化 、包管理器、AMD、 CMD、 require.js 、sea.js

    问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要 ...

  7. common js CMD/AMD 是什么 和他们之间的联系区别

    知道JS有模块化开发的说法,也偶尔听过requireJs,AMD,CMD等等名字,甚至使用node的时候,还用过require之类的方法,但是对这些一直没有一个明确的认识和概念.想必这就是许多新手刚接 ...

  8. 31、vue-cli3引入封装svg图标

    svg图标放大不失真,png会出现失真现象. 一.方法一 1.在对应vue项目里添加插件 vue add svg-sprite 输入 Y 2.在执行 npm install svgo svgo-loa ...

  9. CMD/AMD

    AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues ...

随机推荐

  1. python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法

    python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...

  2. 由于防火墙限制无法访问linux服务器上的tomcat应用

    使用的是CentOS6.4系统. 问题重现: tomcat服务是启动的, 但无法访问服务器上的tomcat应用页面. 解决办法: 在防火墙配置中设置端口: 命令: # cd /etc/sysconfi ...

  3. 火狐使用Ctrl新开窗口不生效

    使用window.open新开页面,火狐浏览器无法使用Ctrl新开窗口后页面停留在当前页面,兼容性问题,使用<a>或者<router-link>标签即可解决 --贡献者:毛毛

  4. MySQL Crash Course #20# Chapter 28. Managing Security

    限制用户的操作权限并不是怕有人恶意搞破坏,而是为了减少失误操作的可能性. 详细文档:https://dev.mysql.com/doc/refman/8.0/en/user-account-manag ...

  5. MySQL Crash Course #19# Chapter 27. Globalization and Localization

    Globalization and Localization When discussing multiple languages and characters sets, you will run ...

  6. P1516/bzoj1477 青蛙的约会

    青蛙的约会 exgcd 根据题意列出方程: 设所用时间为T,相差R圈时相遇 (x+T*m)-(y+T*n)=R*l 移项转换,得 T*(n-m)-R*l=x-y 设a=n-m,b=l,c=x-y,x_ ...

  7. 20145127《java程序设计》第七周学习总结

    一.教材学习内容总结 第十二章 Lambda 1.认识Lambda语法 Lambda 教材的引入循序渐近.深入浅出 Arrays.sort Comparator: 对比C语言中使用函数指针 匿名类与多 ...

  8. Android实践项目汇报(三)

    Google天气客户端 本周学习计划 调试代码使之成功运行并实现天气预报功能. 实际完成情况 由于google取消api接口服务,天气源的传输.所以我换了一个使用 haoserver API接口的程序 ...

  9. Python3基础 sys.path.append 增加模块的搜索路径

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. Death to Binary? (模拟)题解

    思路: 除去前导0,注意两个1不能相邻(11->100),注意 0 *** 或者*** 0或者0 0情况 用string的reverse()很舒服 代码: #include<cstdio& ...