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

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

export default function remoteLoad (url, hasCallback) {
return createScript(url)
/**
* 创建script
* @param url
* @returns {Promise}
*/
function createScript (url) {
var scriptElement = document.createElement('script')
document.body.appendChild(scriptElement)
var 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)
}
}

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

使用方法

目标页面:

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

至此已经做到引入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 调用mysql redis实例代码

    python3.4学习笔记(二十五) Python 调用mysql redis实例代码 #coding: utf-8 __author__ = 'zdz8207' #python2.7 import ...

  2. web前端----响应式布局

    响应式开发 为什么要进行响应式开发? 随着移动设备的流行,网页设计必须要考虑到移动端的设计.同一个网站为了兼容PC端和移动端显示,就需要进行响应式开发. 什么是响应式? 利用媒体查询,让同一个网站兼容 ...

  3. mysql的级联复制和多源复制

    MySQL的复制:https://www.cnblogs.com/wxzhe/p/10051114.html 级联复制的结构如图 我们来设置基于filename和pos的级联复制,并且接受mysql- ...

  4. P3366 【模板】最小生成树(堆优化prim)

    堆优化prim #include<cstdio> #include<cstring> #include<queue> using namespace std; st ...

  5. 03: MySQL基本操作

    MySQL其他篇 目录: 参考网站 1.1 MySQL 三种数据类型(数值,字符串,日期) 1.2 MySQL常用增删改查命令 1.3 删除,添加或修改表字段 1.4 MySQL外键关联(一对多) 1 ...

  6. FSMC(STM32)

    (一)FSMC:Flexible Static Memory Controller,可变(灵活)静态存储控制器 小容量产品是指闪存存储器容量在1 6K至32K 字节之间的STM32F101xx.STM ...

  7. HDU 1796 How many integers can you find(容斥)题解

    思路:二进制解决容斥问题,就和昨天做的差不多.但是这里题目给的因子不是质因子,所以我们求多个因子相乘时要算最小公倍数.题目所给的因数为非负数,故可能有0,如果因子为0就要删除. 代码: #includ ...

  8. Tex: The top-level auxiliary file: *.aux I couldn't open style file IEEEtran.bst 解决方法

    参考: Bibliography is not printed using Kile on Ubuntu Tex: The top-level auxiliary file: *.aux I coul ...

  9. python读取文本txt文件乱码问题

    python2的编码实在是个头疼的问题,编码问题也将作为一个长期的话题,遇到问题随时补充. 这次的问题比较简单,是在做词云wordcloud的时候发现的,作用就是从文本文件中读取文字,将其制作成词云. ...

  10. python打包到pypi小结

       如果你写了一个python库,想让别人快速使用你的库,最简单的方式就是使用python官方出品的库托管网站pypi了.    pypi的全称是Python Package Index,是pyth ...